将 ASP.NET MVC 模型分配给 AngularJS 范围答案

【问题标题】：Assign ASP.NET MVC model to AngularJS scope将 ASP.NET MVC 模型分配给 AngularJS 范围
【发布时间】：2014-11-19 20:24:13
【问题描述】：

在我的视图代码下方（javascript代码在视图中，只是临时用于测试）。

我想将 ASP.NET MVC 模型 (@Model) 分配给 AngularJS 范围 ($scope.person)

我该怎么做？

谢谢，

景色

@model MyApp.Person

<script>
var myApp = angular.module('myApp', []);

myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
    $scope.person = ?????
}]);
</script>

更新 1： 我在 JS 文件中尝试了这段代码：

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

myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
    $scope.person = @Html.Raw(window.person);
}]);

在视图文件中：

<script>
    @{
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    }
    window.person = serializer.Serialize(Model);
</script>

我得到 2 个错误：

ReferenceError: serializer is not defined (on windows)
window.person = serializer.Serialize(Model);

SyntaxError: illegal character (it's the @)
$scope.person = @Html.Raw(window.person);

【问题讨论】：

“非法字符”只是“错误”的 IntelliSense 假设。当用 '' 包围时，错误将消失。

标签： javascript asp.net-mvc angularjs asp.net-mvc-4

【解决方案1】：

我不确定这是否适用于 Angular。

您可以使用Json.Encode 方法将数据对象转换为JavaScript Object Notation (JSON) 格式的字符串。

window.person = @Html.Raw(Json.Encode(Model)); //Store data in global variable.

在您的角度代码使用中，

$scope.person = window.person

但是，最好的解决方案是创建一个服务并使用该服务获取人员数据。

完整代码

@model MyApp.Person

<script>
window.person = @Html.Raw(Json.Encode(Model)); //Store data in global variable.
var myApp = angular.module('myApp', []);

myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
    $scope.person = window.person
}]);
</script>

【讨论】：

问题在于 angularJS。当我添加这一行时，所有 AngularJS 代码都不再工作了。
同样，AngularJS 代码不再工作。我认为最好的解决方案是不使用 AngularJS。
在视图中，它的 temp 将被移动到单独的 JS 文件中

【解决方案2】：

<script>
    @{
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        var json = serializer.Serialize(Model);
    }
    var myApp = angular.module('myApp', []);

    myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
        $scope.person = @Html.Raw(json);
    }]);
</script>

【讨论】：

工作，但仅当代码在视图中而不是在单独的 JS 文件中时。
@Kris-我喜欢 Satpal 说的，//将数据存储在全局变量中。
在js文件中，$scope.person = window.person;在视图文件中，window.person = @serializer.Serialize(Model);或将此行放在括号中。
“ReferenceError: serializer is not defined”的引用错误，括号里是最糟糕的。

【解决方案3】：

我有同样的问题。这会奏效。在你看来：

<script>
    myApp.value('person', @Html.Raw(Model));
</script>

在你的（角度）控制器中：

myApp.controller('personController', ['$scope', '$http', 'person' function ($scope, $http, person) {
    console.log(person);
}]);

如果你在控制器上“注入”你的 json 值，你就会被排序。

【讨论】：

【解决方案4】：

首先在全局 java 脚本变量中赋值，然后在单独的 Angular 文件中使用它

 <script>
   var obj =  '@Html.Raw(Model)';
</script>

现在在您的角度页面中

$scope.person = obj;

【讨论】：