Angular-ui-router：ui-sref-活动和嵌套状态
我在我的应用程序中使用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-RouterfilterincludedByState来检查您的当前状态对任何数量的命名状态。
<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 。
这是解决scheme：
<li class="myNonActiveStyle" ui-sref-active="myActiveStyle"> <a ui-sref="project.details">Details</a> </li>
编辑：
以上仅适用于确切的pathpath，不会将activeStyle应用于嵌套路由。 这个解决scheme应该为此工作：
<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>
可以说，url树如下：
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(); } }]);
第二步：在你的导航栏中
<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>
这个button是目前内部视图导航到下一个查看即博客。 并使您的导航栏突出显示。
find类似的例子，一个演示的angular度ui路由器应用程序： https ： //github.com/vineetsagar7/Angualr-UI-Router
我的代码从/ productGroups导航到/ productPartitions，这是访问“productPartitions”视图的唯一方法。
所以我添加了一个隐藏的锚与ui-sref也设置为“productPartitions”在同一个列表项中有ui-sref-active
<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导航button保持活动状态
