angular js:为什么$scope.product如果是变量就不更新，如果是函数就不更新

angular js: why $scope.product do not update if it is a variable and update if it is a function

本文关键字：更新 如果 js 函数 为什么 变量 product angular scope      更新时间：2023-09-26

我是angular 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
        };
    }]);

在第一种情况下，初始化了$scope字段。就是这样。字段product是使用字段factor的值初始化的，但字段是独立的。

在第二种情况下，您定义了$scope函数product，其返回值取决于$scope字段factor，因此$scope.factor的任何更改都会导致$scope.product返回值的更改。

当呈现页面时，乘积是12，因为6*2是12。尽管您对因子有双向绑定，但将因子*2分配给乘积的代码不会再次执行。

正如中的注释所建议的那样，您应该设置一个ng更改事件并执行$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();
    }]);

最好的方法是使用$watch，请检查这个plunker

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