Can be extended to handle dropdown type/sub links and show parent as active.
Navbar Directive
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
define(['angular', 'app'], function (angular) { 'use strict'; /** * @ngdoc directive * @name ngSeed.directives:navbar * @description * Sets the current navbar option in focus. */ angular .module('app.directives') .directive('navbar', function($location) { return { restrict: 'E', replace: true, transclude: true, templateUrl: 'views/partials/navbar.html', scope: { heading: '@' }, controller: 'Navbar', link: function($scope, $element, $attrs, Navbar) { $scope.$location = $location; $scope.$watch('$location.path()', function(locationPath) { console.log(locationPath); console.log($element); var $li, link, $liElements = $element.find("li"); $.each($liElements, function(i, v) { $li = $($liElements[i]); link = $li.find("a").attr('href'); console.log(link); // if (link.toLowerCase().indexOf(locationPath) >= 0) { if (link.toLowerCase() == locationPath) { $li.addClass("active"); } else { $li.removeClass("active"); } }); }); } } }); }); |
Navbar View Partial
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<header class="navbar navbar-inverse navbar-fixed-top" role="banner"> <div class="container"> <div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> </button> <a class="navbar-brand" href="../">Cleverstack.io</a></div> <nav class="navbar-collapse bs-navbar-collapse collapse" style="height: 1px;" role="navigation"> <ul class="nav navbar-nav"> <li><a href="/login">Demo Login</a></li> <li><a href="/register">Demo Register</a></li> <li class="active"><a href="/dashboard">Dashboard</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/logout">Logout</a></li> </ul> </nav></div> </header> |
Just include this where you want to use it:
|
1 2 3 |
<navbar ng-controller="Navbar"></navbar> |