function inside ng-repeat called 4 times (AngularJs)

Question

The following HTML code populates a ul with 21 phones:

<li ng-repeat="phone in phones" ng-class="{'digestTest': countDigestOccurences(phone) }">
  <p>{{phone.snippet}}</p>
</li>

countDigestOccurences is a JavaScript method which uses a dictionary to keep track of how many times countDigestOccurences() is called per phone.

$scope.countDigestOccurences = function(phone){
  var phoneFound = false;     
  $.each($scope.digestOccurencesPerPhone, function(){
      if(this.phone.id == phone.id){
        phoneFound = true;
        this.occurences++;
      }
  });

  if(!phoneFound)
  { 
    $scope.digestOccurencesPerPhone.push({
      phone: phone,
      occurences: 1
    });
  }
}

Through this method I can clearly see that countDigestOccurences is called 4 times per phone. I can not, for the life of me, figure out why it's called 4 times.

Update:

Number of cycles will remain 4 even if the Phone item's HTML is as follows:

    <li ng-repeat="phone in phones "
        class="thumbnail phone-listing" ng-class="{ 'digestTest': countDigestOccurences(phone),  'digestTestAgain': randomMethodDoesNothing() }">
      <p>{{phone.snippet}}</p>
    </li>

ng-class is evaluated in every digest cycle, not only when inserting the item in the ng-repeat — devqon
– devqon, Commented Sep 18, 2015 at 12:00
Thats how angular works, angular will run whenever they want. stackoverflow.com/questions/17164230/…, stackoverflow.com/questions/28615012/…, stackoverflow.com/questions/14987277/…, google.com/search?q=angular+function+multiple+times — YOU
– YOU, Commented Sep 18, 2015 at 12:28

matiou · Accepted Answer · 2015-09-18 14:05:57Z

4

when Angular compiles and see an expression on the view, like ng-class="function()", ng-model="toto", a $watch is created for it. At every digest cycle, the watches are evaluated by the dirty checking to determine if there is any change in the model.

So in your ng-repeat, you have : one watcher on the phones collection, one watcher on each phone instance and one watcher on the function. As the function on the view isn't a scope variable, angular can't know if the result of the function has changed (you may affect an other scope variable in the function) and so, it reevaluate the function result for each digest cycle.

So you have phones + phone + function + last digest cycle to verify everithing it's ok : 4 cycles

A good practice is to not use function in the view except if rare cases. Instead, store the result of the function in a scope variable and render this variable in the view.

Update :

Due to the discussion bellow, note that only one watch si created for the ng-class directive and it correspond to the value of ng-class. I.e., with : ng-class="{'toto' : functionOne(), 'titi' : functionTwo()}", the watch is on : {'toto' : functionOne(), 'titi' : functionTwo()}. Issued from the AngularJs directive code : scope.$watch(attr[name], ngClassWatchAction, true);

edited Sep 18, 2015 at 14:05

answered Sep 18, 2015 at 12:59

matiou

1561 silver badge7 bronze badges

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

7 Comments

Halaster Over a year ago

If that were the case, wouldn't the code I put in the bottom of answer now increase the cycles from 4? Code isn't up to standards because this is a project testing digest cycle

IfTrue Over a year ago

I don't see why the code you added would increase the number of digests Lucas.

Halaster Over a year ago

Updated again for clarity's sake. I have introduced a new function inside ng-class. Shouldn't this add another watcher and thus another cycle?

matiou Over a year ago

No, because you're always working on the same phone instance, even if you add phone.imageUrl, phone.id,... this is the phone object watched and not its attributes

Halaster Over a year ago

Yes, however I have now added another function. Doesn't a function need another cycle from what I understood?

|

Dragos Rusu · Accepted Answer · 2015-09-18 12:07:17Z

0

How many ajax calls did do you have via $http? Each of them would trigger a $digest. Also, if something changed (and it has, the new data arrived), another $digest will run to make sure it covers everything.

To avoid this add a boolean on an ng-if on a parent element and set it to true once all ajax calls have arrived (see $q).

answered Sep 18, 2015 at 12:07

Dragos Rusu

1,57814 silver badges14 bronze badges

2 Comments

Halaster Over a year ago

None, this is static data. It's all a project to figure out the digest cycles.

Dragos Rusu Over a year ago

Static data, but on the server side (API or json files). On UI, you fetch it by HTTP so it becomes "dynamic".

Collectives™ on Stack Overflow

function inside ng-repeat called 4 times (AngularJs)

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related