Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can have a look at <a href="http://mgcrea.github.io/angular-strap">AngularStrap</a>, the navbar directive seems to be what you are looking for:</p> <p><a href="https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js">https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js</a></p> <pre><code>.directive('bsNavbar', function($location) { 'use strict'; return { restrict: 'A', link: function postLink(scope, element, attrs, controller) { // Watch for the $location scope.$watch(function() { return $location.path(); }, function(newValue, oldValue) { $('li[data-match-route]', element).each(function(k, li) { var $li = angular.element(li), // data('match-rout') does not work with dynamic attributes pattern = $li.attr('data-match-route'), regexp = new RegExp('^' + pattern + '$', ['i']); if(regexp.test(newValue)) { $li.addClass('active'); } else { $li.removeClass('active'); } }); }); } }; }); </code></pre> <p>To use this directive:</p> <ol> <li><p>Download AngularStrap from <a href="http://mgcrea.github.io/angular-strap/">http://mgcrea.github.io/angular-strap/</a> </p></li> <li><p>Include the script on your page after bootstrap.js:<br> <code>&lt;script src="lib/angular-strap.js"&gt;&lt;/script&gt;</code> </p></li> <li><p>Add the directives to your module:<br> <code>angular.module('myApp', ['$strap.directives'])</code> </p></li> <li><p>Add the directive to your navbar:<br> <code>&lt;div class="navbar" bs-navbar&gt;</code> </p></li> <li><p>Add regexes on each nav item:<br> <code>&lt;li data-match-route="/about"&gt;&lt;a href="#/about"&gt;About&lt;/a&gt;&lt;/li&gt;</code></p></li> </ol>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload