Question

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

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

e.g：

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

Answer 2

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

<script>
     My.Namespace.town = @Html.Raw(Model.Town);
</script>

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

2 个答案: