Controller function called multiple times

Question

I was attempting to get AngularJs to apply an active class on a nav section depending upon the active route. My solution works fine but I noticed a curious behaviour -- more on that below. For now, here's how the active class is set in the HTML:

<ul class="menu" ng-controller="ControllerHeader">
  <li><a ng-class="{ active: isActive('/foo') }" href="#/foo">foo</a></li>
  <li><a ng-class="{ active: isActive('/bar') }" href="#/bar">bar</a></li>
  <li><a ng-class="{ active: isActive('/baz') }" href="#/baz">baz</a></li>
</ul>

ControllerHeader and isActive are defined as given:

var app = angular.module('app', [ ]);

app.controller( 'ControllerHeader', ['$scope', '$location',
  function ($scope, $location) {
    $scope.isActive = function (location) {
      // multiple logging occurs: exactly 3*3 times
      console.log(location, $location.path());
      return location === $location.path();
    };
  }
] );

The issue I've noticed is that isActive above is called 3 * 3 times! Could someone please explain why? How can I fix it that such that it is called once per item only?

It's called everytime a $digest cycle is triggered, which is a lot. Unless it's causing performance issues, don't worry about it. — tymeJV
– tymeJV, Commented Feb 19, 2015 at 19:24
does your route defines the controller as well? hows your route defined? are you using ui-router? or ng-route? — Dayan Moreno Leon
– Dayan Moreno Leon, Commented Feb 19, 2015 at 19:25
First question I had on Angular - a possible duplicate of yours: stackoverflow.com/questions/25908130/… — New Dev
– New Dev, Commented Feb 19, 2015 at 19:26

floribon · Accepted Answer · 2015-02-19 19:38:19Z

4

If you are using Angular 1.3+, you can use the :: operator to only evaluate the expression once:

<ul class="menu" ng-controller="ControllerHeader">
  <li><a ng-class="::{ active: isActive('/foo') }" href="#/foo">foo</a></li>
  <li><a ng-class="::{ active: isActive('/bar') }" href="#/bar">bar</a></li>
  <li><a ng-class="::{ active: isActive('/baz') }" href="#/baz">baz</a></li>
</ul>

If you are using an older version of Angular, you can use a third party library such as bindonce

As for why this is happening without binding once, indeed it is covered by many other questions. If you want the class to be dynamically set depending on angular context, Angular need to execute the function to check its value. That is called executing the watchers during a digest cycle, and this is done often.

answered Feb 19, 2015 at 19:38

floribon

19.2k5 gold badges56 silver badges68 bronze badges

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

2 Comments

sickrandir Over a year ago

it doesn't seems to work if binded on a function that return a random value. Is it correct? How can I achieve one time binding with a random function?

floribon Over a year ago

No, being random shouldn't matter, the first time the function return something that is not undefined should freeze the value (it doesn't make a difference for the browser if it's random or not). Feel free to create a question and present a reproducible code snippet if you need help

squiroid · Accepted Answer · 2015-02-19 19:26:46Z

0

All expression that you use in AngularJS get evaluated multiple times when a digest cycle runs. This is done for dirty checking which validates whether the current value of expression is different from the last value.

answered Feb 19, 2015 at 19:26

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

1 Comment

New Dev Over a year ago

It could be evaluated multiple times on a digest. Typically, it's once. And this question has been asked in one flavor or another many times. Why not find a duplicate rather than provide yet-another-answer?

Collectives™ on Stack Overflow

Controller function called multiple times

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related