javascript - 如何将 MVC 模型数据与 Angular JS 模型链接起来

Question

我正在使用 MVC Razor View 和 AngularJS。

我在 Controller 中创建 UserMaster 对象并传递给 View

Function AddNewUser() As ActionResult
       Dim objUser As New UserMaster()
        Return View("UserMaster", objUserMaster)
End Function

在 View 中，通过使用 HTML 帮助器类，将创建文本框和验证控件

@<div ng-app ng-controller="UserController">
    @Html.EditorFor(Function(model) model.UserName)
    @Html.ValidationMessageFor(Function(model) model.UserName)

在客户端使用以下语句创建 AngularJS 模型

    <script type="text/javascript">
           function UserController($scope, $http) {
           $scope.UserData = @Html.Raw(Json.Encode(Model));
           }
    </script>

服务器端验证(我在 UserMaster 类中编写)在客户端运行良好，Razor 引擎通过生成客户端验证脚本自动执行此操作。

我在提交后自动在服务器端获取繁荣模型。

但我无法使用 AngularJS(通过使用 $scope.UserData.UserName)在客户端操作/获取模型数据。当用户使用 Angular JS 修改它时，我想访问文本框内的 UserName 值。如何？

Answer 1

在 MVC - 5 中使用 htmlAttributes 是可能的

@Html.EditorFor(Function(model) model.UserName, New With {Key .htmlAttributes = New With {Key .ng_model = "model.UserName"}})

我们必须使用 ng_model 代替 ng-model 并且 MVC 将在运行时呈现为 ng-model