如何使用模型数据和 Angular js答案

【问题标题】：How to work with model data and angular js如何使用模型数据和 Angular js
【发布时间】：2015-10-06 02:49:29
【问题描述】：

我想以这种方式设计我的页面。假设当第一次请求控制器时，模型数据将被传递给视图，Angular 将捕获该数据并构建一个表格 UI。

型号

public class MyData{

   public int Value1 {get;set;}
   public int Value2 {get;set;}
}

public ActionResult Index()
{
    List<MyData> data = new List<MyData>(); //change this with how you retrieve data
    return View(data);
}

<script type="text/javascript">
$(function(){
   var dataObject = JSON.parse('@Html.Raw(Json.Encode(Model.ToList()))');
});
</script>

当页面在客户端渲染时，我不想从客户端调用服务器端函数，而是我想从服务器端在客户端发出数据，Angular 将捕获它并填充 UI。告诉我如何使用代码示例来实现。谢谢

【问题讨论】：

【解决方案1】：

您不希望该变量包含在 $(function(){}) 中，原因有两个。

首先，它创建一个闭包，因此您无法从包装函数外部访问它，其次，在您需要它之后触发 ready 事件之前，它不会被定义。

只要做：

<script type="text/javascript">    
   var dataObject = JSON.parse('@Html.Raw(Json.Encode(Model.ToList()))');    
</script>

然后，您可以从 Angular 中的任何位置访问该全局变量，以将其传递给服务、常量或您想要使用它的任何东西。

请记住，angular 只是 javascript，因此适用 javascript 范围规则，并且任何全局变量都位于范围链的顶部

【讨论】：