javascript - 我可以在 html 中初始化 Angular ngModel，然后在 Controller 中使用它的值吗？

Question

html:

<div ng-controller="MyController">
<form>
<!-- one way to do it -->
<input ng-model="var1" value="1"></input> 
<!-- another way, not approved per angular documentation outside of ngRepeat -->
<input ng-model="var2" ng-init="var2=2"></input>
</form>
</div>

js:

angular.module('myApp', []);
angular.module('myApp')
    .controller('MyController', ['$scope', function ($scope) {
  console.log("value of var1 is " + $scope.var1);
  console.log("value of var2 is " + $scope.var2);
  $scope.var1 = 3;
  $scope.var2 = 4;
}]);

View this in jsbin

结果:

value of var1 is undefined
value of var2 is undefined
[setting values to 3 and 4 displays fine in inputs]

因此， Controller 代码似乎在评估输入 ng-model 参数之前运行。考虑到 Controller 比输入标签更早宣布，这是有道理的。

问题:

有没有办法让 Controller 逻辑读取并遵守 var1 和 var2 的初始值？

Answer 1

您不能混合使用 Angular 的 ng-model 和常规 HTML value 属性。

如果你想初始化你的模型，在你的 Controller 中进行(或使用 ng-init 但不推荐)。并从您的 HTML 中删除该值。

$scope.var1 = 3;
$scope.var2 = 4;

此外，ng-init 是在第一次读取 Controller 后计算的，所以如果你想显示来自 ng-init 的值，你需要 $watch:它不会在你的 Controller 第一次执行时出现。