Angular scope function executed multiple times

ε祈祈猫儿з 提交于 2019-12-27 12:06:25

问题


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?


回答1:


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.




回答2:


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.




回答3:


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.



来源:https://stackoverflow.com/questions/17164230/angular-scope-function-executed-multiple-times

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!