Why does my Angular.js controller executes its function twice in the following code?

Question

I have an ng-repeat looping through an array of objects that belongs to SomeController:

<div ng-controller="SomeController as aCtrl">
  <div ng-repeat="category in aCtrl.categories">
    <p ng-show="aCtrl.checkShouldBeDisplayed(category)">{{category.name}}</p>
  </div>
</div>

The controller is defined as:

app.controller('SomeController', function() {

this.categories = [{
  "name": "one",
}, {
  "name": "two",
}, {
  "name": "three",
}, {
  "name": "four",
}];

this.counter = 0;

this.checkShouldBeDisplayed = function(channel) {
  this.counter = this.counter + 1;
  console.log("executing checkShouldBeDisplayed " + this.counter);
  return true;
};

});

I would expect the checkShouldBeDisplayed function to count to 4 as there are four elements in the SomeController.categories array. Instead it counts to 8 - check it here: http://plnkr.co/edit/dyvM49kLLTGof9O92jGb (you'll need to look at the console in your browser to see the log). How can I get around this behaviour? Cheers!

Community · Accepted Answer · 2017-05-23 12:20:45Z

3

This is expected; The directive ng-repeat will repeat as many times as the framework feels is right; this is called dirty checking and you can read a bit more about it in this post.

For this reason, it is better to think declaratively rather than imperatively. In other words, the method checkShouldBeDisplayed should only do what it says on the tin and not rely on the number of times it is called. If you need to perform an aggregation or manipulation of some sort, that should be done elsewhere in the controller.

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Jun 27, 2014 at 19:19

Mendhak

8,9726 gold badges56 silver badges76 bronze badges

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

2 Comments

ivalub Over a year ago

Right, that seems to complicate things. What I am trying to do here is override the normal ng-show behaviour, which is bound to the state of the model through some other state that is defined on the controller (imagine having SomeController.firstUse = true (instead of the counter), which is reset to false once the user interacts with the controller. Can you recommend an Angular way to do this?

Mendhak Over a year ago

If by interacts, you mean click or mouseovers, you can use ng-click or ng-mouseover and call a method which sets firstUse to false. If interaction simply involves looking at it, you can instead do it in the $scope.$on("$destroy"... where you set it to false. If that's not what you meant, please edit your question and add your overall goal. Then we can suggest different approaches.

gkalpak · Accepted Answer · 2014-06-29 15:41:13Z

According to the docs:

The watchExpression is called on every call to $digest() and should return the value that will be watched. (Since $digest() reruns when it detects changes the watchExpression can execute multiple times per $digest() and should be idempotent.)
[...]
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.

And all ngShow does is register a watcher:

scope.$watch(attr.ngShow, function ngShowWatchAction(value){
    $animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide');
});

Your function is ngShow's watch-expression and is thus executed twice:
1. In the first $digest it detects the new values.
2. In the second $digest it verifies that nothing has changed and terminates.

In this short demo, you can verify there are two $digest loops.

OK, thanks. Why are there two $digest loops here? Is that because of the dirty checking as @Mendhack is saying?

Collectives™ on Stack Overflow

Why does my Angular.js controller executes its function twice in the following code?

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related