Question

我有以下函数计算，它接受四个参数并返回它们的乘积。我已经在其中设置了一个控制台日志。

当我第一次更改num_1时，会调用一次函数calculate。
当我第一次点击num_2时，会调用一次函数calculate。
当我更改num_2时，函数calculate被称为三次。
当我更改num_3时，该函数被调用两次。
当我更改num_4时，该函数被调用两次。
当我再次更改num_1时，该函数被称为三次。

我在控制台中设置了一个日志来记录函数调用的数量。我是AngularJS的初学者。请解释函数被调用的原因，这取决于其他函数scale_by_2和scale_by_4

<!DOCTYPE html>
<html lang="en-US">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>

    <body>
    <div ng-app="myApp">
        <div ng-controller="calculateController as calc">
        <p> Number 1 : <input type="num" min="1" ng-model="calc.num_1"></p>
        <p> Number 2 : <input type="num" min="1" ng-model="calc.num_2"></p>
        <p> Number 2 : <input type="num" min="1" ng-model="calc.num_3"></p>
        <p> Number 4 : <input type="num" min="1" ng-model="calc.num_4"></p>
         {{ calculate(calc.num_1, calc.num_2, calc.num_3, calc.num_4) }}
        <p> Scale by 2 : {{ scale_by_2(calc.num_1, calc.num_2, calc.num_3, calc.num_4) }} </p>
        <p> Scale by 2 : {{ scale_by_4(calc.num_1, calc.num_2, calc.num_3, calc.num_4) }} </p>
        </div>
    </div>
    </body>
    <script>
     var app = angular.module('myApp', ['ngRoute']);

     app.controller('calculateController', ['$scope', function($scope) {
     $scope.num_1 = 1;
     $scope.num_2 = 1;
     $scope.num_3 = 1;

     $scope.calculate =  function(num_1, num_2,num_3,num_4) {
         $scope.product = num_1 * num_3 * num_4 ;
         console.log(num_1);
         return num_1 * num_2;
     }

     $scope.scale_by_2 =  function(num_1, num_2,num_3,num_4) {
         num = $scope.product;
         return num * 2;
     }

     $scope.scale_by_4 =  function(num_1, num_2,num_3,num_4) {
         num = $scope.product;
         return num * 4;
     }
     }]);
    </script>
</html>

Answer 1

Angular通过运行其摘要周期来更新您在前端看到的值。在摘要周期中，您的视图中调用的函数可能会被多次调用，通常直到Angular确定您的值已经确定。

来自Angular's docs on $digest()：

处理当前范围及其子项的所有观察者。因为观察者的监听器可以改变模型，所以$ digest（）保持不变打电话给观察者直到不再有听众开枪。这意味着有可能进入无限循环。这个功能会 throw＆＃39;超出最大迭代限制。＆＃39;如果迭代次数超过10。

很难解释为什么Angular会将你的方法多次调用，而不深入研究你的例子的摘要周期，但它绝对值得期待。这就是为什么避免在视图中调用太多函数这一点非常重要 - 每次视图更改时，所有这些函数都将至少处理一次。

角度如何重新计算更改？

1 个答案: