Angular ui router ui sref活动状态和嵌套状态

Question

我使用的是Angular 1.4.7，ui router 0.2.15，我希望嵌套的路由/导航栏能够工作。目前，我正在使用ui sref active来突出显示每个导航栏中的各个锚点。

以下是呈现的HTML的视觉效果：http://s29.postimg.org/6hygp05mf/routing_example.png.我希望它能突出显示每个导航栏中的一个单元格（即Brainfood、Index）。顶部案例通过，底部案例失败。

/脑力食品

• 期望：它应该突出导航项目："Brainfood"，"Index"
• 通行证

/脑力食品/物品

• 期望：它应该突出显示导航项目："Brainfood"，"items"
• 失败：Brainfood未突出显示

状态

以下是我创建的状态（©=具体，@=抽象）。

ADD+ ©index /
ADD+ @brainfood /brainfood
ADD+ ©brainfood.index /
ADD+ ©brainfood.items /items
ADD+ ©brainfood.tags /tags
ADD+ @songfu /songfu
ADD+ ©songfu.index /

代码-模板

<div>
    <div class="comp-navbar" ng-class="type">
        <ul>
            <li ng-repeat="link in links" ui-sref-active="selected">
                <a ui-sref="{{ link.state }}">{{ link.name }}</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

当我将顶部导航的ui sref值从"brainefood.index"更改为"braineFood"时，顶部导航可以正常工作。现在，当我转到"/brainfood/tags"时，它按预期工作。然而，当我点击顶部导航时，这会中断，因为我无法导航到抽象状态。

有两种解决方案：

1. 将抽象状态更改为具体状态（不需要）
2. 添加一个抽象重定向破解

为什么使用ui路由器创建带有嵌套导航栏的基本嵌套视图层次结构如此困难？这个问题的主要原因是所识别的状态和所期望的状态（ui sref）之间缺乏分离。

一个可能的解决方案：

//Current directives:
ui-sref="state to navigate to"
ui-sref-active="class to toggle when state is active"
//New directive:
ui-sref-identity="define the state to use by ui-sref-active"