CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangular-ui-bootstrap
Danger14
Danger14

Reputation: 760

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

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:

Upvotes: 0

Views: 1383

Answers (1)

Cory Silva
Cory Silva

Reputation: 2811

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

Upvotes: 1

Related Questions