AngularJs和ASP.NET MVC 5-ng-model覆盖文本框值

我有一个使用ASP.NET MVC 5使用@Html.TextBoxFor构建的表单，用我的模型填充表单（例如，在表单导航或服务器端validation失败后）。

我现在已经使用Angular引入了客户端地址查找，这意味着现在使用ng-model修饰了一些表单字段，以使Angular查找能够填充搜索到的地址。

例如：

 @Html.TextBoxFor(m => m.Town, new { @class="form-control", ng_model="address.town" }) 

现在，添加ng-model会覆盖重新加载页面时从MVC模型设置的值。

在浏览器中查看源代码显示文本框值已从MVC模型正确设置为Town ，但Angular随后出现并使用address.town填充它，该address.town为空，因此表单不显示任何值。

我怎样才能阻止Angular这样做呢？

Answer 1

您可以使用ng-init强制MVC中的值

  @Html.TextBoxFor(m => m.Town, new { ng_model="address.town", ng_init="address.town= Model.Town" }) 

或者，我使用的命令是https://stackoverflow.com/a/22567485/2030565

 app.directive('input', function ($parse) { return { restrict: 'E', require: '?ngModel', link: function (scope, element, attrs) { if (attrs.ngModel) { val = attrs.value || element.text(); $parse(attrs.ngModel).assign(scope, val); } } }; }); 

Answer 2

您可以在服务器模板底部的Javascript部分中设置一个变量，Angular控制器在初始化时将其分配给模型。