Question

我有与ASP.net MVC5绑定模型的控件

 @Html.TextBoxFor(model => model.OriginLocation.City, new { @class = "form-control", data_ng_model = "address1.City", test_change = "" })

因此，当页面加载文本框输入的值时，应该显示来自带有Razor绑定控件的服务的值，后者我可以操作该值来更改此控件的角度模型。我所拥有的是文本框加载空。我查看源时看到的值但是没有显示。

<input class="form-control ng-pristine ng-valid" data-ng-model="address1.City" data-val="true" data-val-length="The field City must be a string with a maximum length of 50." data-val-length-max="50" id="OriginLocation_City" name="OriginLocation.City" test-change="" type="text" value="Manheim">

js片段

app.controller('LocationCtrl', ["$scope",
function ($scope) {
  $scope.address1 = { Label: 'address1' };

Answer 1

ngModel优先于最初设置的值（它将值设置为“”，因为模型不存在）。看看这里......

http://jsfiddle.net/yApeP/

但您可以使用ngInit ...

指定值

http://jsfiddle.net/D7vh7/

这意味着您可以在生成文本框时使用ngInit ...

@Html.TextBoxFor(model => model.OriginLocation.City,
    new { @class = "form-control", 
         data_ng_model = "address1.City", 
         test_change = "",
         data_ng_init = string.Format("address1.City = '{0}'", Model.OriginLocation.City.Replace("'", @"\'"))  })

Answer 2

Angular将使用其自己的模型中的值替换文本框的内容，这意味着您需要填充Angular模型。这可以通过将MVC模型（或部分模型）序列化到Angular模型中来快速实现：

app.controller("TestController", function($scope) {
    $scope.person = @Html.Raw(JsonConvert.SerializeObject(Model.Person));
});

然后，您可以在视图中呈现MVC控件，如下所示：

@Html.TextBoxFor(x => x.Person.Name, new { ng_model = "person.Name" })

Answer 3

考虑到@Alan的答案，我找到了一种“干净”的方式。那就是我在使用Angular.js创建ASP MVC项目时使用的解决方案。

不是在Angular控制器内部序列化模型（需要在Razor模板中声明控制器），而是在每个剃刀模板中的全局变量中将其序列化，如：

<script>
    //Add the namespace you want to not poluate the global namespace
    window.Model = @Html.Raw(JsonConvert.SerializeObject(Model))
</script>

我还使用属性属性[ScriptIgnore]作为我不想序列化的属性（可能导致循环引用）。

public class Classroom {
    public string Title {get;set;}

    [ScriptIgnore]
    //Students could be associated to classroom, and that classroom has  
    //  students etc. If you want those properties, create a new object in a 
    //  PageView withtout circular references
    public List<Students> Students {get;set;}
}

之后，在我的控制器内部，我只是做了类似

的事情

app.controller("TestController", function($scope) {
    $scope.model = window.Model;
    //My other stuff...
});

此外，您的角度模型始终具有SAME属性，具有您的ASP MVC模型。

Answer 4

解决这个生命周期问题的一个简洁方法是为＆＃34;值＆＃34;写一个指令。输入属性。

首先，您可以使用基本的Razor语法在yout input元素中编写Razor的模型值。

＆＃13;

 <input type="text" class="form-control" id="name" name="name" value="@Model.Name" data-ng-model="myModel.name">

＆＃13;

这将在呈现页面时在输入中写入@ Model.Name的值，但是当Angular启动绑定时，此值将被空值替换。

所以你可以写一个指令，并在＆＃34;链接＆＃34;您可以使用ngModel进行播放的方法，以便在Angular清除之前保留输入中存在的值。（该属性＆＃39;优先：0＆＃39;表示该指令应尽快编译）

＆＃13;

function inputDirective(){
    return {
        restrict:'A',
        priority: 0,
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModelCtrl){                      
                  ngModelCtrl.$setViewValue($(elem).val());
              }
    };
}

＆＃13;

这应该恢复Razor在你的Angular模型中写的值

与MVC Html.TextBoxFOr绑定的角度模型

4 个答案: