CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Jonas
Jonas

Reputation: 784

AngularJS nav active class won't show

I'm Quite new to AngularJS and I try to develop a nav bar, which changes the activeclass. So I tried to make a function in my controller to define the active class.

My html code of the nav: nav code

The controller:

Controller class

I compiled with grunt and there are no errors/warnings. Every navigation item hasn't the active class. How does this come?

Upvotes: 0

Views: 131

Answers (2)

Tom
Tom

Reputation: 7740

You're not injecting $location in your controller here:

['$scope', function($scope, $location) ...]

Add it to the injection list:

['$scope', '$location', function($scope, $location) ...]

Your syntax for ng-class is fine.

Upvotes: 4

shershen
shershen

Reputation: 9993

Ng-class directive has a bit different syntax. It should me a map of class names and condition when it's applied. In your case it could be like this:

<li ng-class="{active: getClass(PATH)}">...</li>

While actually much more mature solution for your case, could be the ui-sref-active of the of angular ui router. It takes more time for initial configuration, but using it you can not only menu highlighting but the whole state management within you angular app. See example here : http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

Upvotes: -2

Related Questions