Question

考虑这个HTML

...
<label>Weight:
    <input type="text" ng-model="weight">
</label><br>
<label>Height:
    <input type="text" ng-model="height">
</label><br>
<label>
    BMI: {{bmi}}
</label>
...

和这个JavaScript

...
$scope.bmi = +$scope.weight / +$scope.height * +$scope.height;
...

如果我在浏览器中为重量和高度输入字段赋值，为什么BMI字段不会更新？显然，当控制器第一次加载时，$ scope.weight和$ scope.height值为空。但是一旦他们从视图中获得价值，为什么$ scope.bmi不会使用这些新值？我找到了很多针对这个问题的解决方案（通过使用$ watch或调用更新bmi值的函数），但有人可以解释为什么上面的代码不起作用？

Answer 1

这是因为你的bmi是一种矫揉造作。这是第一次调用控制器时设置，永不改变。因为你的var只是一个原始值，所以我不是一个绑定，只是一个值。例如，绑定可以与工厂上的函数存储一起使用。

使用功能，您可以更新值。

<label>Weight:
    <input type="text" ng-change="updateBMI()" ng-model="weight">
</label><br>
<label>Height:
    <input type="text" ng-change="updateBMI()" ng-model="height">
</label><br>
<label>
    BMI: {{bmi}}
</label>

然后在你的控制器中你将拥有更新功能：

$scope.updateBMI = function(){
  $scope.bmi = +$scope.weight / +$scope.height * +$scope.height;
}

Answer 2

这是因为$ scope.bmi仅在控制器加载时计算一次。每次更改身高和体重值时，你必须使bmi属性可计算或可靠计算

请参阅演示代码here，了解如何在angularjs中创建依赖属性

为什么双向绑定在某些情况下不起作用？

2 个答案: