How to add active class inside header navigation directive inside a controller? - angularjs

Question

Since my app has a navigation menu repeated in several pages, I made a directive for it. Now, the .active class isn't applied to current page anymore. Do I need to put the controller inside the directive?
Though not elegant, here's my code so far. Thanks.
page.html
<div class="app-container">
<div class="header clearfix">
<div ng-controller="NavmenuCtrl">
<nav-menu></nav-menu>
</div><!-- END NavmenuCtrl -->
</div><!-- /header -->
<div class="container"></div>
</div><!-- /app-container -->
navmenu directive
'use strict';
var app = angular.module('tempApp');
app.controller('NavmenuCtrl', function ($scope, $route) {
$scope.navMenuState = function($scope) {
$scope.navState = $route.current.navState;
};
});
app.directive('navMenu', function($route) {
return {
scope: {},
restrict: 'E',
replace: true,
templateUrl: 'views/partials/navmenu.html',
link: function navMenuState(scope, element, attrs, controller){
// Watch for the $location
scope.$watch(function() {
// do I need a scope.$watch?
}
};
});
navmenu.html partial
<div>
<div class="nav-container">
<ul class="navbar">
<li class="col-xs-5" ng-class="{ active:route.current.navState === 'pg1Active' }">
<a href="/#/pg1/">
<img src="images/icon1.png" class="center-block">
</a>
</li>
<li class="col-xs-5" ng-class="{ active:route.current.navState === 'pg2Active' }">
<a href="/#/pg2">
<img src="images/icon2.png" class="center-block">
</a>
</li>
</ul><!-- /.navbar -->
<div class="overflow-menu pull-right dropdown" ng-controller="NavDropdownCtrl">
<a class="dropdown-toggle">
<img ng-src="images/icon3.png">
</a>
<ul class="dropdown-menu">
<li ng-repeat="name in MenuItems">
<h4>
<a ng-href="#/{{ name | lowercase }}/">
{{name}}
</a>
</h4>
</li>
</ul>
</div><!-- /.overflow-menu -->
</div><!-- /.nav-container -->
</div>
app.js
'use strict';
angular.module('tempApp', [
...
])
.config(function ($routeProvider) {
$routeProvider
.when('/pg1/', {
templateUrl: 'views/pg1.html',
controller: 'MainCtrl',
navState: 'pg1Active'
})
.when('/pg2/',
{
templateUrl: 'views/pg2.html',
controller: 'MainCtrl',
navState: 'pg2Active'
})
I also found these related links:
Behavior of controller inside directives
AngularJS - Handle repeated fragments like Header and Footer
http://coder1.com/articles/angularjs-managing-active-nav-elements

Answer 1

You need to inject the $location service into your directive and check for routes there.