Question

我有导航指令;工作正常......除非我更改页面，否则在我手动刷新网站之前，“活动”类没有添加到相关链接。

我的ng-class所在的代码：

<ul class="nav navbar-nav">
   <li ng-repeat="item in nav" ng-class="{'active':(item.alias==current)}">
      <a ui-sref="{{item.alias}}">{{item.name}}</a>
   </li>
</ul>

导航指令：

(function () {
    'use strict';
    angular
        .module('app')
        .directive('navigation', navigation);

    navigation.$inject = ['$rootScope', '$timeout', '$state', 'navService'];

    function navigation($rootScope,$timeout, $state, navService) {

        $rootScope.nav = navService.nav;
        $rootScope.current = $state.current.name;

        return {
            restrict: 'AE',
            replace: 'true',
            templateUrl: '/layout/navigation/navigation.html'
        };

    };
})();

我的印象是这应该开箱即用！是因为我正在使用指令吗？

Answer 1

最有可能 - 不确定您使用的是哪个版本，但是......-您可以在ui-router中使用ui-sref-active属性。

<ul class="nav navbar-nav">
   <li ng-repeat="item in nav" ui-sref-active="active">
      <a ui-sref="{{item.alias}}">{{item.name}}</a>
   </li>
</ul>

Answer 2

页面加载时，navigation函数只运行一次。 $rootScope.current只设置一次。看起来你正在使用ui-router。尝试将该行放在$stateChangeSuccess事件回调中：

$rootScope.$on('$stateChangeSuccess', 
  function(event, toState, toParams, fromState, fromParams) {
    $rootScope.current = toState.name;
  }
)

Answer 3

而不是跟踪$ rootScope中的当前状态名称，为什么不直接检查状态名称。

ng-class="{ 'active': $state.includes('state.name')}"

这也适用于嵌套状态。例如，如果您的状态如下所示，那么$state.includes('home.item1')如果状态为subItem1

，则为真

home
    item1
        subItem1

ng-class条件有效，但仅在刷新页面时才有效

3 个答案: