CODEWITHSUNDEEP
angularjsangularjs-scope
hesa
hesa

Reputation: 451

Angular scope function executed multiple times

I have defined a function on scope. And when I call it from the view inside {{}} it executes X number of times.

Controller

function testCtrl($scope) {
   $scope.myFunc = function(name) {
       return "Hello " + name;
   }
}

HTML

<div>{{myFunc('Joe')}}</div>

You can see it in this example: http://jsfiddle.net/rbRvD/2/

Or with Plunker: http://plnkr.co/edit/LLQ7cKs2fEoBwv0C5XPE

I guess this is done the wrong way, but why is it executed so many times?

Upvotes: 33

Views: 29187

Answers (3)

FreeDevz
FreeDevz

Reputation: 88

AngularJs does not suggest you to change scope's model on rendering. If you want to change your scope's model, do it in Controller or Directive.

Think of view as a place to display data (scope values in this case) only, all the modifying of the data should be in Controller or Directive.

Upvotes: 1

zetetic
zetetic

Reputation: 47548

Your function is run 10 times. Why 10? Why not 100?

The answer is in the docs:

The watch listener may change the model, which may trigger other listeners to fire. This is achieved by rerunning the watchers until no changes are detected. The rerun iteration limit is 10 to prevent an infinite loop deadlock.

When you see this happening, it means you are changing the model in such a way that Angular has to rerun the digest and fire the watches again. In your particular case you are calling a function that updates a counter, which is displayed on the page. When the counter value changes it runs the digest again, which calls the function that updates the counter, etc, etc.

Angular expects you (and indeed encourages you) to change the model and let the view respond to those changes, rather than the other way around.

Upvotes: 37

Stewie
Stewie

Reputation: 60396

This is expected behaviour. Angular expressions ({{expression}}) are re-evaluated on each $digest loop (sometimes multiple times per loop). This means that expressions should stay light in computational terms.

For that matter, expression evaluation should not result in an AJAX call or some other intensive or asynchronous operation, or if it has to, than you should be caching the results.

Upvotes: 12

Related Questions