如何使用Angular JS设置bootstrap导航栏活动类？

javascript angularjs twitter-bootstrap angularjs-directive navbar

2022-08-29 23:59:52

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

Home | About | Contact

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

#/对于家庭
#/about对于“关于”页面
#/contact对于联系页面

答案 1

一种非常优雅的方法是使用ng控制器在ng视图之外运行单个控制器：

<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>

并包含在控制器中.js：

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

答案 2

我刚刚写了一个指令来处理这个问题，所以你可以简单地将属性添加到父元素中，并且任何时候路由更改，它都会找到匹配的链接，并将类添加到相应的。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');   
                };
            });     
        });
    }
}
}]);