Angular ASP.NET MVC 绑定答案

【问题标题】：Angular ASP.NET MVC BindingAngular ASP.NET MVC 绑定
【发布时间】：2014-08-08 03:10:38
【问题描述】：

在我们的 MVC 5 项目中，我们使用 Angular。以下 Razor 运行良好：

 @Html.EditorFor(x => x.FirstName,
          new { required = "required", ng_model = "FirstName" })

但是，如果在呈现页面时将 MVC Model.FirstName 设置为“Bob”，则 Input 字段仍为空白。

如果我在 Angular 控制器中设置：

  $scope.FirstName = "@(Model.FirstName)";

然后“鲍勃”出现了。

我的问题是：我是否必须为 UI 中的每个字段设置 $scope.VARIABLE=MODEL.VARIABLE，或者我可以告诉 Angular 尊重来自 ASP.NET MVC 的内容.

Angular 似乎覆盖了 MVC 写入的 [input value="Bob"]。

【问题讨论】：

【解决方案1】：

当您绑定到范围时，无需将模型分成单独的字段。相反，您应该绑定整个模型：

 $scope.model = @Html.Raw(Json.Encode(Model));

这将呈现给客户端：

 $scope.model = { FirstName: 'John', LastName:'Doe', etc };

然后您可以将输入字段绑定为：

@Html.EditorFor(x => x.FirstName,
      new { required = "required", ng_model = "model.FirstName" })

就个人而言，我认为不使用@Html 更简洁，而是使用简单的 HTML：

<input ng-model="model.FirstName" required />

在 Angular 中，您不再需要 id。

【讨论】：