Angular-ui-router：ui-sref-active和嵌套状态

我angular-ui-router在应用程序中使用和嵌套状态，并且我还有一个导航栏。导航栏是手写的，ui-sref-active用于突出显示当前状态。它是一个两级导航栏。

现在，当我进入时，说Products / Categories我希望同时突出显示Products（在1级）和Categories（在2级）。但是，使用时ui-sref-active，如果我处于状态，Products.Categories则仅突出显示该状态，而不突出显示Products。

有什么办法可以使Products该状态突出显示？

代替这个-

<li ui-sref-active="active">
    <a ui-sref="posts.details">Posts</a>
</li>

你可以这样做-

<li ng-class="{active: $state.includes('posts')}">
    <a ui-sref="posts.details">Posts</a>
</li>

目前不起作用。这里正在进行讨论（https://github.com/angular-ui/ui-router/pull/927）并且，它将很快添加。

更新：

为此，$state应该在视图中可用。

angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
   $scope.$state = $state;
}]);

更多信息

更新[2]：

从版本开始0.2.11，它可以直接使用。请检查相关问题：https : //github.com/angular-ui/ui-router/issues/818

当您嵌套多个没有层次关系的状态并且没有可用于该视图的控制器时，这是一个选项。您可以使用UI-Router过滤器includedByState对照任意数量的命名状态检查当前状态。

<a ui-sref="production.products" ng-class="{active: ('production.products' | 
includedByState) || ('planning.products' | includedByState) || 
('production.categories' | includedByState) || 
('planning.categories' | includedByState)}">
  Items
</a>

TL; DR：多个不相关的命名状态需要在同一链接上应用活动类，并且您没有控制器？使用includedByState。

这是解决方案：

<li class="myNonActiveStyle" ui-sref-active="myActiveStyle">
     <a ui-sref="project.details">Details</a>
</li>

编辑：

上面的方法仅适用于确切的路径，而不会将activeStyle应用于嵌套的路径。此解决方案应对此起作用：

<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>

可以说网址树如下：

app (for home page) -> app.products -> app.products.category

用法：

<li ui-sref-active="active">
    <a ui-sref="app.products">Products</a>
</li>

现在，当您按products：时，只有产品处于活动状态。

如果按category：产品和类别都将处于活动状态。

如果您只希望在按下类别时将其激活，则应ui-sref-active-eq在产品上使用：，这意味着仅该类别将是活动的，而不是其子项。

在app.js中的正确用法：

angular.module('confusionApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider

            // route for the home page
            .state('app', {
                url:'/',
                views: { ... }
            })

            // route for the aboutus page
            .state('app.products', {
                url:'products',
                views: { ... }
            })

            // route for the contactus page
            .state('app.products.category', {
                url:'category',
                views: { ... }
            })

        $urlRouterProvider.otherwise('/');
    });

如此简单，第1步：为导航栏添加控制器，或在包含导航栏的现有控制器中添加以下内容

app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
        $scope.isActive = function(destination) {
        return destination === $location.path();
    }

}]);

步骤2：在您的导航栏中

<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>

而已。

UI路由器。使您的导航栏处于活动状态的代码段。

的HTML

<li ui-sref-active="is-active" ui-nested><a ui-sref="course">Courses</a>
</li> <li ui-sref-active="is-active" ui-nested><a ui-sref="blog">blog</a></li>

的CSS

is-active{
      background-color: rgb(28,153,218);
}

在CourseView.HTML内部

<button type="button" ui-sref="blog" class="btn btn-primary">Next</button>

该按钮位于课程视图内，可将您导航到下一个视图，即博客。并使导航栏突出显示。

找到类似的示例，一个演示角度ui-router应用程序：https : //github.com/vineetsagar7/Angualr-UI-Router

我的代码从/ productGroups导航到/ productPartitions，这是访问“ productPartitions”视图的唯一方法。

因此，我在具有ui-sref-active的同一列表项中添加了一个ui-sref也设置为“ productPartitions”的隐藏锚。

<li ui-sref-active="active">
     <a ui-sref="productGroups">
     <i class="fa fa-magic"></i> Product groups </a>
     <a ui-sref="productPartitions" style="display:none;"></a>
</li>

现在，访问任一视图时，productGroups导航按钮仍处于活动状态

在这里，我为达到相同目的做了些什么。父状态为“ app.message”，并且不声明为抽象。

子状态为“ app.message.draft”，“ app.message.all”，“ app.message.sent”。

我的导航链接-

<a ui-sref-active="active-menu" ui-sref="app.message">Messages</a>

定义您的孩子的路线/链接。

并在配置中更新

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
                if (toState.name === 'app.message') {
                    event.preventDefault();
                    $state.go('app.message.draft');
                    return;
                }
            });