Angular Directive are Loading Multiple time

Question

Is this a bug in Angular or am I missing something:

Calling a function from the directive's template shows that that function is executed 11 times ! with a templateurl, and 22 times !! with a string template.

angular.module('testDirective', [])
        .directive('myDirective', function() {
          return {
            scope:{},
            template: '{{increment()}} {{count}}',
            controller: function($scope) {

              $scope.count = 0;

              $scope.increment = function() {
                $scope.count += 1;
              };
            }
          };
        })

HTML:

<body ng-app="testDirective">
    <my-directive></my-directive>
</body>

RESULT:

Here is a Plunker with both template and templateUrl methods.

This is quite an issue when method calls are involved within repeaters as an example, this ends up calling the same method dramatically more time than it should.

Anybody could shed some light on this ?

That's not the directive loading multiple times. It's a bound expression being executed multiple times, exactly as Angular is intended to work. — Kevin, Jun 03 '15 at 14:37

score 6 · Answer 1 · edited May 23 '17 at 11:53

{{increment()}} in your view is going to be called every time the digest cycle is called, like any bound expression would be. If you were incrementing in the controller function itself, rather than a bound function called from the view template, that would indicate that the directive was "loading" multiple times. But the nature of Angular is that any bound expression is going to be checked for changes repeatedly during the digest cycle, and anything you expect to happen only once (or even a predictable number of times) should never happen inside an expression bound to a content element. On the other hand, expressions bound to event handlers only execute when the event fires.

The model takes some time to get used to. Though the old documentation argued against it, you can use functions in content binding expressions, but they should never change state. You have no real control over when $digest() is called, and if you're thinking in the Angular way, you won't want to.

score 1 · Answer 2 · edited May 23 '17 at 12:08

1

I also found this post which relates to the same issue to be useful : Using ng-class with a function call - called multiple times

Also one-time binding can be a solution is some case as related here : Angular lazy one-time binding for expressions

edited May 23 '17 at 12:08

Community

1
1

answered Jun 04 '15 at 14:42

user3107057

31
2
4

score 0 · Answer 3 · edited Feb 18 '20 at 11:18

0

increment() is being called every time the view is being updated. On load, increment() is called, and the count goes up by 1 which causes the view to be updated and increment() to be called again.

If you look in your console, you will see that Angular is telling you that it's stuck in an infinite $digest loop.

edited Feb 18 '20 at 11:18

Nimantha

6,405
6
28
69

answered Jun 03 '15 at 15:02

adamjld

310
1
9

Angular Directive are Loading Multiple time

3 Answers3