我可以在 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 ：它不会第一次执行控制器时就在那里。

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

Can I init an Angular ngModel in html, and then use its value in controller?

html

javascript

angularjs

angular-ngmodel