Question

我是棱角分明的新手。我发现了一个问题，但我不知道为什么。任何人都可以为我解释一下吗？非常感谢。

下面是我的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

当呈现页面时，产品为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 2

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

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

Answer 3

最好的方法是使用$ watch，请查看此plunker

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

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

3 个答案: