Question

在我的应用程序中，我返回使用此TestViewModel的下面的视图。

public class TestViewModel
{
    public List<string> Tests { get; set; }
}

查看：

@model AdminSite.Models.TestsViewModel
    @{
        ViewBag.Title = "Tests";
    }

    <hgroup class="title">
        <h1>@ViewBag.Title</h1>
    </hgroup>

    <!doctype html>
    <html>
    <head>
        <script src="~/Scripts/Angular/angular.min.js"></script>
        <script src="~/Scripts/Angular/Tests.js"></script>
    </head>
    <body>
        <div ng-app="testsTable">
            <div ng-controller="TableController">
                <table my-table options="options"></table>
            </div>
        </div>
    </body>
    </html>

正如您所看到的，我使用AngularJS创建了一个DataTable，但我想要的是代替表数据＆＃34; aaData＆＃34;被硬编码我希望它来自TestViewModel模型。

var app = angular.module('testsTable', []);

app.directive('myTable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, controller) {
            var dataTable = element.dataTable(scope.options);
        },
        scope: {
            options: "="
        }
    };
});


app.controller('TableController', ['$scope', function ($scope) {
    $scope.options = {
        aoColumns: [
            {
                "sTitle": "Col 1",
            },
            {
                "sTitle": "Col 2"
            },
            {
                "sTitle": "Col 3"
            }
        ],
        aoColumnDefs: [{
            "bSortable": true,
        }],
        bJQueryUI: true,
        bDestroy: true,
        aaData: [
            ["A", "B", "C"],
            ["A", "B", "C"],

        ]
    };
}]);

我想我可能需要创建另一个绑定模型的指令，例如

<table my-table options="options" model-data="@Model.Tests"></table>

但是我不确定Angular指令是如何工作的，我怎么写这个指令＆amp;它如何将其与范围联系起来

Answer 1

您的问题已经回答here

您可以直接将值注入JavaScript：

//View.cshtml
<script type="text/javascript">
    var arrayOfArrays = JSON.parse('@Html.Raw(Model.Addresses)');
</script>

请参阅JSON.parse，Html.Raw

或者你可以通过Ajax获取值：

public ActionResult GetValues()
{
    // logic
    // Edit you don't need to serialize it just return the object

    return Json(new { Addresses: lAddressGeocodeModel });
}

<script type="text/javascript">
$(function() {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("GetValues")',
        success: function(result) {
            // do something with result
        }
    });
});
</script>

请参阅jQuery.ajax

Answer 2

所以...使用{{options.aaData=JSON.parse('@Html.Raw(@Model.Tests)');""}}设置aaData是有效的，但我没有监视更改，这意味着表没有使用新信息重新绘制。

跟踪更改我在我的指令中添加了一个监视器，它监视aaData的更改，然后根据需要更新表。

scope.$watch('options.aaData', handleUpdate, true);
function handleUpdate(newData) {
                var data = newData || null;
                if (data) {
                    dataTable.fnClearTable();
                    dataTable.fnAddData(newData);
                }
            }

我的真实解决方案现在看起来有点不同，因为我正在使用dataTables ajax调用来拉下我的json数据，然后使用结果设置dataSrc。使用内置的ajax调用意味着我可以删除指令监视，因为datatables为我处理这个。

最后一点，如果你发现自己在找到如何混合angularJS＆amp; dataTables然后这个小提琴帮助了我很多。 http://jsfiddle.net/TNy3w/2/

Answer 3

由于您正在使用角度，因此请使用角度配置：

<script>
    (function () {
        angular.module('app').value('mydata', {
            propOne: '@Url.Action("Index", "Dirty", null)',
            propTwo: angular.fromJson('@Html.Raw(Model.Addresses)')
            // more properties here
        });
    })();
</script>

然后你可以在角度应用中的任何地方注入和使用'mydata'

编辑：您可以创建一个将模型序列化为JSON的扩展方法，只要您提供的参数不为空，Html.Raw就不会给您错误。

public static class ObjectExtensions { public static string SerializeObject(this object obj) { return JsonConvert.SerializeObject( obj, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() }); } }

然后做：

@using [static extension class namespace here]; ... angular.fromJson('@Html.Raw(Model.Addresses.SerializeObject())')

如何将MVC模型数据传递给AngularJS控制器范围

3 个答案: