ng-class 条件有效，但仅当我刷新页面时

Question

我有一个导航指令；工作正常...除非我更改页面 class "active" 不会添加到相关 link 直到我手动刷新网站。

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

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

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

Answer 2

与其在 $rootScope 中跟踪当前状态名称，不如像这样直接检查状态名称。

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

这也适用于嵌套状态。例如，如果您的状态如下所示，那么如果状态为 subItem1

，则 $state.includes('home.item1') 将为真

home
    item1
        subItem1

Answer 3

很可能 - 不确定您使用的是哪个版本，但是...- 您可以为此使用 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>

ng-class 条件有效，但仅当我刷新页面时

ng-class condition works, but only when I refresh the page

javascript

angularjs

ng-class