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

【问题标题】：How do I pass MVC model data to AngularJS controller scope如何将 MVC 模型数据传递给 AngularJS 控制器范围
【发布时间】：2016-08-11 18:55:37
【问题描述】：

在我的应用程序中，我将返回下面使用此 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，但我希望它不是硬编码的表数据“aaData”，而是来自 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 指令是如何准确工作的，我将如何编写所述指令以及它如何将其绑定到范围

【问题讨论】：

标签： angularjs asp.net-mvc angularjs-directive

【解决方案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

【讨论】：

这不是我正在努力解决的序列化部分，所以我如何设置范围以使用该序列化数据。我真正想要实现的是 var arrayOfArrays = JSON.parse('@Html.Raw(Model.Addresses)') 然后 $scope.option.aaData = arrayOfArrays
您可以在控制器中创建此范围变量，然后为其分配值。我认为您正在使用数据表。如果是这样，则应在您更改数组内容后更新该表。在您的 HTML 中，只需使用 {{myVariable=JSON.parse('@Html.Raw(Model.Addresses)');""}}
在您的 HTML 中，只需在表格标记前使用 {{options.aaData=JSON.parse('@Html.Raw(@Model.Tests)');""}}。让我知道它是否有效，以便我编辑我的答案。
仍然没有运气，以防序列化部分无法正常工作，我将您给我的行简化为{{options.aaData = [["A","B","C"],["1","2","3"]];""}}

【解决方案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 调用意味着我可以删除指令 watch，因为数据表会为我处理这个问题。

最后一点，如果您在弄清楚如何混合 angularJS 和 dataTables 时发现自己在这里，那么这个小提琴对我有很大帮助。 http://jsfiddle.net/TNy3w/2/

【讨论】：

【解决方案3】：

由于您正在使用 Angular，因此请利用 Angular 配置：

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

然后您可以在 Angular 应用程序中的任何位置注入和使用“mydata”

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

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())')

【讨论】：

@Html.Raw 对我造成了错误，但这是一个理想的答案