如何设置Angular JS的引导navbar活动类？

如果我有一个导航栏的项目引导

Home | About | Contact

如何在每个菜单项处于活动状态时为其设置活动类？ 也就是说，当角度路线class="active"时，我如何设置class="active"

#/为家

#/about为关于页面

#/contact联系人页面

---

一个非常优雅的方法是使用ng-controller在ng-view之外运行一个控制器：

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

并包含在controllers.js中：

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

---

我只写了一个指令来处理这个问题，所以你可以简单地将属性bs-active-link到父元素<ul> ，并且在路由改变时，它会找到匹配的链接，并将active类添加到相应的<li> 。

你可以在这里看到它的行动：http://jsfiddle.net/8mcedv3b/

HTML示例：

<ul class="nav navbar-nav" bs-active-link>
  <li><a href="/home">Home</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

使用Javascript：

angular.module('appName')
.directive('bsActiveLink', ['$location', function ($location) {
return {
    restrict: 'A', //use as attribute 
    replace: false,
    link: function (scope, elem) {
        //after the route has changed
        scope.$on("$routeChangeSuccess", function () {
            var hrefs = ['/#' + $location.path(),
                         '#' + $location.path(), //html5: false
                         $location.path()]; //html5: true
            angular.forEach(elem.find('a'), function (a) {
                a = angular.element(a);
                if (-1 !== hrefs.indexOf(a.attr('href'))) {
                    a.parent().addClass('active');
                } else {
                    a.parent().removeClass('active');   
                };
            });     
        });
    }
}
}]);

---

你可以看看AngularStrap，navbar指令看起来就是你想要的：

https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js

.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');
          }

        });
      });
    }
  };
});

要使用这个指令：

从http://mgcrea.github.io/angular-strap/下载AngularStrap

bootstrap.js后在脚本中包含脚本：
<script src="lib/angular-strap.js"></script>

将指令添加到您的模块中：
angular.module('myApp', ['$strap.directives'])

将该指令添加到您的导航栏中：
<div class="navbar" bs-navbar>

在每个导航项中添加正则表达式：
<li data-match-route="/about"><a href="#/about">About</a></li>

链接地址: http://www.djcxy.com/p/89447.html

上一篇: How to set bootstrap navbar active class with Angular JS?

下一篇: Change the default header color in MVC5 app