Почему двусторонняя привязка не работает в некоторых ситуациях?

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

Это потому, что $ scope.bmi рассчитывается за один раз только, когда контроллер нагрузки. вам придется сделать BMI свойство быть вычислимой или надежен, чтобы вычислить каждый раз при изменении значения высоты и веса

Смотрите демонстрационный код here, чтобы увидеть, как мы можем сделать зависимые свойства в angularjs

Answer 2

Это потому, что ваш bmi здесь является аффектом. Это устанавливается в первый раз, когда вы вызываете контроллер и никогда не меняетесь. Поскольку ваш var является просто примитивным значением, i t не является привязкой, а просто значением. Например, привязка может работать с хранилищем функций на фабрике.

С помощью функции вы можете обновить значение.

<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; 
}