Angularjs 角度ui路由器：ui sref活动和嵌套状态

我在应用程序中使用和嵌套状态，并且我还有一个导航栏。导航栏是手写的，并使用

ui-sref-active

突出显示当前状态。它是一个两级导航栏

现在，当我在时，比如说

产品/类别

，我希望突出显示

产品

（在级别1中）和

类别

（在级别2中）。但是，使用

ui-sref-active

，如果我处于状态

Products.Categories

，则仅突出显示该状态，而不是

Products

有没有办法使

产品在该状态下突出显示？
而不是此状态-

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


更新[2]：

从版本
0.2.11
开始，它是开箱即用的。请检查相关问题：
这是解决方案：

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

链接
当您嵌套多个层次无关的状态，并且没有可用于视图的控制器时，这里有一个选项。您可以使用UI路由器筛选器includedByState根据任意数量的命名状态检查当前状态

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

假设url树如下所示：

app（主页）->app.products->app.products.category

用法：

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

用户界面路由器。使导航栏处于活动状态的代码段

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>

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

内部courseView.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>

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

下一步

此按钮位于课程视图中，可将您导航到下一个视图，即博客。并使导航栏高亮显示

找到类似的示例，一个演示angular ui路由器应用程序：
非常简单，
步骤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>

浏览日志

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

因此，我添加了一个隐藏锚，ui sref也被设置为“productPartitions”，在同一个列表项中，ui sref处于活动状态

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

您是否在作用域中特别提供了
$state
，如
$rootScope.$state=$state
？@jvannistelrooy是的。通常我不会在
$rootScope
中添加任何内容，但这是一个例外。感谢您发布此答案。非常适合我使用。我最终只是将include方法映射到我的控制器的作用域（
$scope.includes=$state.includes
），而不是附加整个
$state
。我有四个链接，当其中一个被选中时，我想在上面添加活动类。@hollandOr您可以尝试添加
数据ng类=”{活动：$state.includes（'root.parent'）
到每个链接？其中
active
是类名。节省了我的时间..如果您创建的菜单链接不遵循
状态
的层次结构，感谢您的最佳解决方案。如果您在菜单链接中创建父菜单项，并且不想仅仅为了使用
ui sref act而创建另一个
状态
ive
功能。我相信
状态
是用来布置HTML的，不用于菜单链接。它也适用于1.0.0-beta.1，对上述菜单链接有用。我有一个侧边栏，ui引用父抽象状态的4个子状态之一。仅命名抽象状态名称部分，在4个状态之间切换时效果与预期一样同级状态。您可以将所有这些逻辑放在一个函数中：）应标记为正确答案！谢谢，
ui sref active eq
工作正常！
<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>

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