角js：为什么$ scope.product不更新，如果它是一个变量，如果它是一个函数更新

Question

我是新的角js。我发现了一个问题，但我不知道为什么。有人能为我解释吗？万分感谢。

下面

是我的html文件：

<div ng-controller="index"> 
    <input type="text" ng-model="factor" /> {{product}} 
</div> 

下面

是我的js文件：

angular.module("root", []) 
    .controller("index", ["$scope", function($scope) { 
     $scope.factor = 6; 
     $scope.product = $scope.factor * 2; 
    }]); 

当我输入更改为5，产品的价值不更新为预计10

，但如果我改变了这样的代码下面，一旦产品价值更新为我改变输入

HTML：

<div ng-controller="index"> 
    <input type="text" ng-model="factor" /> {{product()}} 
</div> 

JS：

angular.module("root", []) 
    .controller("index", ["$scope", function($scope) { 
     $scope.factor = 6; 
     $scope.product = function(){ 
      return $scope.factor * 2 
     }; 
    }]); 

Answer 1

在你初始化$scope领域尚属首例。就是这样。字段product使用字段factor的值初始化，但字段是独立的。

在第二种情况下，你定义一个$scope函数product和它的返回值是依赖于$scope字段factor因而$scope.factor任何变化引起$scope.product返回值的变化。

Answer 2

当页面呈现，该产品是12，因为6 * 2 = 12，即使您已为要素的双向约束力，但将产品分配系数* 2的代码不会再次执行。按照注释中的建议，你应该做的是设置一个ng-change事件，并执行$ scope.product = $ scope.factor * 2;如果您更改该因子，则应该重新绑定页面。

product（）的工作原理是每次在窗体上进行更改时，都会执行函数。这是非常无效的，因为如果你有其他领域，产品功能仍然运行，这可能不是你想要的。

试试这个：

HTML：

<div ng-controller="index"> 
    <input type="text" ng-change="factorChanged()" ng-model="factor" /> {{product}} 
</div> 

JS：

angular.module("root", []) 
    .controller("index", ["$scope", function($scope) { 
     $scope.factorChanged = function() { 
      $scope.product = $scope.factor * 2; 
     }; 

     $scope.factor = 6; 
     $scope.factorChanged(); 
    }]); 

Answer 3

最好的方法是使用$表，请检查该plunker

app 
.controller("index", ["$scope", function($scope) { 
    $scope.factor = 6; 
    $scope.$watch('factor',function(newValue,oldValue){ 
     $scope.product = newValue *2; 
    }); 
}]);