我可以在 html 中初始化一个 Angular ngModel，然后在控制器中使用它的值吗？

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]

因此，控制器代码似乎在评估输入 ng-model 参数之前正在运行。这是有道理的，因为控制器比输入标签更早宣布。

问题：

有没有办法让控制器逻辑读取并尊重 var1 和 var2 的初始值？

Answer 1

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

如果要初始化模型，请在控制器中进行（或使用ng-init，但不推荐）。并从您的 HTML 中删除 value。

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

此外，ng-init 在首次读取控制器后进行评估，因此如果您想显示来自ng-init 的值，您需要为它使用$watch：它不会在您的控制器第一次出现时出现执行。