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保持活动状态