MVC 和 Angular 之间的绑定值答案

【问题标题】：Binding values between MVC and AngularMVC 和 Angular 之间的绑定值
【发布时间】：2017-02-11 15:14:04
【问题描述】：

场景

我使用 Angular，纯粹是为了验证我的前端，以及 MVC 模型绑定

示例

<div ng-class="{'has-error': Contact.FirstName.$invalid}">
    <input type="text"
           name="@Html.NameFor(m => m.FirstName)"
           id="@Html.IdFor(m => m.FirstName)"
           value="@Model.FirstName"
           ng-model="model.person.firstName"
           required />
</div>

问题

value 在回发时由 MVC 填充，但因为 model.person.firstName 最初是 null，所以当文档完成加载时该值被清除，并且 angular 已将其所有魔力刷新到视图中。

问题

如何保留ng-model（以保持验证工作）并预填充字段的value？

【问题讨论】：

您需要在 Angular 中调用后端服务，然后在 Controller 中使用结果。
@AmyBlankenship 数据未通过服务传送到前端。那将是微不足道的。问题是值被绑定到视图，早在 angular 获取它之前，所以 angular 只是忽略视图中的内容并做它的事情
对。不要那样做。它绕过了 AngularJS，这就是你遇到问题的原因。

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

【解决方案1】：

这些值必须在控制器中初始化，而不是在视图中。

选项 1：

你可以试试ng-init。见this issue

选项 2：

另一种方法是直接在.cshtml 文件中的<script></script> 标记中创建服务。使用 Razor 填充服务的数据，然后使用 Angular 控制器获取这些值。

在我看来，第二种方式更干净。

【讨论】：