我可以在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;
}]);

在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 ：第一次執行控制器時就不會出現該值。