Good day, recently began studying AngularJS, and there was a question why the function in the controller

$scope.somefunc = function(){ console.log(1); }

When it is called once in the template, in the debugger it shows that it was called 20 times, and not put to it once. Tell me which way to dig, and what could be the problem here?

Controller code

 .controller('ScheduleCtrl', function ($scope) { $scope.func = function(){ console.log(1); }; });

View

 <div ng-controller="ScheduleCtrl"> {{func()}} </div>

Here is the result:

http://joxi.ru/V2VBJ9Qswb9E2v - the red number in the circles is the number of repetitions

  • one
    Show the template code where the method you are calling. - Suvitruf ♦
  • The debugger may fail. How many times is present in pin 1? You must provide a minimum code that reproduces the problem. In the current view, this function cannot be called 20 times. Maybe you have a cycle in a template or a template with a call is connected to another template or another cycle in a completely unpredictable form. - sba
  • Answered below with code. - Angus123
  • @sba, in the current code, at least 2 times can be called - Grundy

2 answers 2

It is not recommended to use functions to display the value in the view, because the function in this case will be called several times during each iteration of the digest cycle. At least two times:

  1. Get current value
  2. Make sure the value doesn't change anymore.

Why it happens:
When a variable from scope is specified in the view , the angular is added to the watcher variable.
To determine whether the view should be updated or not, the angular launches the digest cycle in which it checks the values ​​returned by the observers with those previously saved, if the values ​​have changed continues to run the digest until the changes stop.
The disadvantage of this approach is that if the value of just one variable has changed, then all the observed variables will still be checked for immutability.

If a function is passed instead of a variable, it will also be called on each digest pass to get a value by which it can be judged whether the view should be updated or not.

For the solution, usually the function is called in the controller code, the value is assigned to the variable and already used in the view .

    In general, something is mentioned in the dock.

    The watch listener This is achieved by rerunning the watchers until no changes are detected. The infinite loop deadlock.

    The listener may call other listeners. The carousel will continue until there is a situation where there is no change.

    And this thing is limited to 10.

    Angular expects from you (and really encourages you) that you change the model, and give the opportunity for the view to respond to changes, and not vice versa.

    • And if I just need to perform a function once, get the value that it returns and just display? - Angus123
    • @ Angus123, then call it inside the controller, or another variant of ng-init but it is not recommended to use it for these purposes - Grundy
    • @ Angus123, show an example of the controller and the template and we will be able to suggest how best - Grundy