CODEWITHSUNDEEP
javascriptangularjs
xtreak
xtreak

Reputation: 1376

How does angular recalculate the changes?

I have the following function calculate that takes four parameters and returns the product of them. I had put up a console log in it.

I have put up a log in the console to note the number of function calls. I am beginner in AngularJS. Please explain the why the function is called so many times does it depend upon the other functions scale_by_2 and 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>

Upvotes: 0

Views: 648

Answers (1)

Agop
Agop

Reputation: 1917

Angular updates the values that you see on the front-end by running through its digest cycle. During the digest cycle, functions called in your view(s) may be called multiple times, usually until Angular is certain that your values have settled.

From Angular's docs on $digest():

Processes all of the watchers of the current scope and its children. Because a watcher's listener can change the model, the $digest() keeps calling the watchers until no more listeners are firing. This means that it is possible to get into an infinite loop. This function will throw 'Maximum iteration limit exceeded.' if the number of iterations exceeds 10.

It's hard to explain why Angular calls your methods exactly that many times without digging deep into the digest cycle of your example, but it's definitely to be expected. This is why it's important to avoid calling too many functions in your view like that - every time the view changes, all of them will be processed at least once.

Upvotes: 2

Related Questions