How to set bootstrap navbar active class with Angular JS?

by

A very elegant way is to use ng-controller to run a single controller outside of the ng-view:

<div class="collapse navbar-collapse" ng-controller="HeaderController">
    <ul class="nav navbar-nav">
        <li ng-class="{ active: isActive("https://stackoverflow.com/")}"><a href="https://stackoverflow.com/">Home</a></li>
        <li ng-class="{ active: isActive('/dogs')}"><a href="http://stackoverflow.com/dogs">Dogs</a></li>
        <li ng-class="{ active: isActive('/cats')}"><a href="http://stackoverflow.com/cats">Cats</a></li>
    </ul>
</div>
<div ng-view></div>

and include in controllers.js:

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}

More Related Contents:

  1. Controller not a function, got undefined, while defining controllers globally
  2. How to set an iframe src attribute from a variable in AngularJS
  3. How to require a controller in an angularjs directive
  4. How to make a directive update ng-model on jquery on event?
  5. AngularJS – Image “onload” event
  6. What’s the difference/incompatibility between ng-model and ng-value?
  7. Angular JS: What is the need of the directive’s link function when we already had directive’s controller with scope?
  8. Showing alert in angularjs when user leaves a page
  9. How to pass parameters to a modal?
  10. Handle open/collapse events of Accordion in Angular
  11. Resetting form after submit in Angularjs
  12. Dynamic form name attribute in Angularjs
  13. Can an angular directive pass arguments to functions in expressions specified in the directive’s attributes?
  14. Detect unsaved changes and alert user using angularjs
  15. How do display a collapsible tree in AngularJS + Bootstrap
  16. how to bind Bootstrap-datepicker element with angularjs ng-model?
  17. angular directive ignore non-numeric input
  18. How can I listen for a click-and-hold in AngularJS?
  19. Extending AngularJs Directive
  20. ng-selected not working in select element
  21. Confirmation dialog on ng-click – AngularJS
  22. Hide Angular UI Bootstrap popover when clicking outside of it
  23. Directive is being rendered before promise is resolved
  24. Add ng-click dynamically in directive link function
  25. How to create a custom input type?
  26. Sort or Rearrange Rows of a table in angularjs (drag and drop)
  27. How to slide nav bar from left instead from top?
  28. How to usemultiple Angular UI Bootstrap Datepicker in single form?
  29. AngularUI-Bootstrap Typeahead: Grouping results
  30. How to Create simple drag and Drop in angularjs

Leave a Comment