Angular ng-class code

Question

I am very new to Angular and I have this piece of code:

<nav ng-controller="navController">
  <ul>
    <li ng-class="{'active': location('/') || location('/homepage')}">
        <a href="puppies">view puppies</a>
    </li>
  </ul>
</nav>

With the corresponding controller:

obApp.controller('navController', function($scope, $location) {
    $scope.location = function(loc){
        if(loc == $location.path()){
            return true;
        }else{
            return false;
        }
    }
})

Now everything works fine. When I'm on the homepage the list element gets the class active added to it, HOWEVER there is also the angular ng-class directive code shown in the source, like so (this is the HTML source output of the browser):

<li ng-class="{'active': location('/') || location('/homepage')}" class="active">
    <a href="puppies">view puppies</a>
</li>

Should the list element not look like: <li class="active"><a href="puppies">view puppies</a></li> ? Logic would dictate that it should look like it is now, because ng-controller="x" shows in the source as it is as well. However that's a hook if you will. The other one's an expression. It looks funky and I'm not sure if it's ok or not. Please, if you answer, detail your answer.

Wawy · Accepted Answer · 2014-08-25 18:48:48Z

1

There is nothing wrong with your code, ng-class directive doesn't remove the attribute ng-class from the element when the expression evaluates to true, since you could have more than one expression/class in your ng-class attribute value.

Additionally if the directive did remove the attribute (ng-class) angular would have no way of knowing that you have applied that directive to the element. For example, your element had ng-if on it, it would be removed from the DOM and appended conditionally.

Example

ng-class="{'active': location('/') || location('homepage'), 'disabled': location('private'))}"

edited Aug 25, 2014 at 18:48

answered Aug 25, 2014 at 18:43

Wawy

6,2692 gold badges26 silver badges24 bronze badges

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

1 Comment

Radu Andrei Over a year ago

Thanx. I guess i was expecting the removal of everything in parentheses and only 'ng-class' to remain.

ne4istb · Accepted Answer · 2014-08-25 19:10:39Z

1

Such usage of ng-class is non-effective because $scope.location method will be called at least twice (for location('/') and location('homepage')) each digest loop. There could be a lot of digest loops due to balancing mechanism.

Better approach is to calculate if element is active on location change.

Controller:

$scope.$on('$locationChangeSuccess', function(){
   $scope.isHomePage =  location('/') || location('/homepage');
});

Markup:

<nav ng-controller="navController">
  <ul>
    <li ng-class="{'active': isHomePage}">
        <a href="puppies">view puppies</a>
    </li>
  </ul>
</nav>

answered Aug 25, 2014 at 19:10

ne4istb

6726 silver badges17 bronze badges

1 Comment

Radu Andrei Over a year ago

True. Just threw it together since i'm experimenting at this point. Upvoted. Thanx.

Collectives™ on Stack Overflow

Angular ng-class code

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related