Angular js - Digest Loop

Question

I may trying to clear my concept on digest loop. I have a small HTML page as :

<!doctype html>
<html>
    <head lang="en">
        <meta charset="utf-8"/>        
        <title>Practice</title>
    </head>
    <body ng-app="myApp">
        <div ng-controller="myController">
            Enter your text <br>
            <textarea rows="5" id="comments" ng-model="commentText"></textarea>
            <br>
            Type Char:{{ lenghtComment }}            
        </div>        
        <script src="https://code.angularjs.org/1.5.0-beta.2/angular.min.js" type="text/javascript"></script>
        <script src="prac.js" type="text/javascript"></script>
    </body>

</html>

===================================== And small angualr file as :

var myApp=angular.module("myApp",[]);
myApp.controller("myController",["$scope",function($scope){
    $scope.commentText="";
   /* $scope.lenghtComment=function(){
        return $scope.commentText.length;
    };*/

 $scope.lengthComment=$scope.commentText.length;

}]);

I want to display the count of characters I type in the Text box. Though there are many ways to do so, I wanted to know why the above one does not work. Scope Variable "LenghtComment" is dependent on "commentText", so the digest loops detects a change on "commentText" as the user types in and should then reiterate over watcher-list to ensure if any dependent variable has changed. In this run it should find the change in "lenghtComment" variable and update the app. But the case is not. However if I use the function as commented, it works perfectly great. Please point out gap in my understanding. Thanking you guys in advance.

is that a typo you have? in your HTML you have lenghtComment but in your JS file you have the correct spelling lengthComment. Is it wrong in your code or just in your question body? — Claies
– Claies, Commented Jan 1, 2016 at 2:10

Claies · Accepted Answer · 2016-01-01 02:21:38Z

3

Aside from the typo in your code, this won't work the way it is written now.

Angular doesn't continually re-run your controller every $digest cycle. Instead, it creates listeners which monitor changes in the variables, and updates these variables.

However, in this situation, $scope.lengthComment isn't changing every $digest cycle. It may appear to be changing, but in reality, $scope.commentText.length is an assignment that returns an integer (in this case, 0). Once the assignment is complete, it is not re-evaluated. lengthComment is in this case a primitive, and it is not dependent on commentText.

In contrast, the other form $scope.lengthComment=function() is constantly changing. The variable in this case isn't assigned to the return value of the function, but the function itself. Every $digest, this function must be re-evaluated to determine if it's result is the same.

answered Jan 1, 2016 at 2:21

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Deep Singhal Over a year ago

Thanks Claies. It clarifies my doubt. Thanks a lot. Also apologies for the typo.

Claies Over a year ago

typos happen, I just wanted to be clear that the typo wasn't the cause of the issue you were trying to solve. If this answer sufficiently answered your question, then be sure to accept the answer. :)

Collectives™ on Stack Overflow

Angular js - Digest Loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related