棱角分明的UI路由器：UI-SREF主动和嵌套态 [英] Angular-ui-router: ui-sref-active and nested states

问题描述

我使用 角UI路由器 在我的应用程序嵌套的状态，我也有一个导航栏。导航栏是手写的，并使用 UI-SREF主动来突出显示当前状态。它是一个二级导航栏。

I am using angular-ui-router and nested states in my application, and I also have a navigation bar. The nav bar is hand written, and uses ui-sref-active to highlight the current state. It is a two-level navigation bar.

现在，当我在，说产品/分类我想这两个产品（1级）和类别（2级）加以强调。然而，使用 UI-SREF主动，如果我在状态 Products.Categories 那么只有状态突出，没有产品。

Now, when I am in, say Products / Categories I would like both Products (in level 1) and Categories (in level 2) to be highlighted. However, using ui-sref-active, if I am in state Products.Categories then only that state is highlighted, not Products.

有没有一些方法，使产品亮点在那个状态？

Is there some way to make Products highlight in that state?

推荐答案

取而代之的是 -

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

您可以做到这一点 -

You can do this-

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

---

目前这是行不通的。有一个讨论会在这里（<一href=\"https://github.com/angular-ui/ui-router/pull/927\">https://github.com/angular-ui/ui-router/pull/927)并且，它很快就会加入

---

Currently it doesn't work. There is a discussion going on here (https://github.com/angular-ui/ui-router/pull/927) And, it will be added soon.

更新：

对于这项工作， $状态应在视图中可用。

For this to work, $state should be available in view.

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

更多信息

UPDATE [2]：

由于版本 0.2.11 ，它的工作原理开箱。请检查相关的问题：<一href=\"https://github.com/angular-ui/ui-router/issues/818\">https://github.com/angular-ui/ui-router/issues/818

As of version 0.2.11, it works out of the box. Please check the related issue: https://github.com/angular-ui/ui-router/issues/818

这篇关于棱角分明的UI路由器：UI-SREF主动和嵌套态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！