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

Question

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

我现在引入了使用 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 填充它为空，因此表单不显示任何值。

如何防止 Angular 这样做？

Answer 1

您可以使用 ng-init 从 MVC 强制一个值

<input name="Town" type="text" ng-model="address.town" ng-init="address.town= @Model.Town" />

@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);
            }
        }
}; });