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

期望：它应突出显示导航项目：“Brainfood”，“Index”。
通行证

/ brainfood /项

期望：它应突出显示导航项目：“Brainfood”，“Items”。
失败：Brainfood没有突出显示

国

以下是我创建的状态（©= concrete，@ = abstract）。

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值从“brainfood.index”更改为“brainfood”时，顶级导航按预期工作。现在，当我去“/ brainfood / tags”时，它按预期工作。然而，当我点击顶部导航时，这会中断，因为我无法导航到抽象状态。

有两种解决方案：

change your abstract states to concrete（不想要）
add an abstract redirect hack

为什么使用ui-router创建嵌套导航栏的基本嵌套视图层次结构如此困难？这个问题的主要原因是所识别的状态与所需状态（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"

Angular ui-router ui-sref-active和Nested States

1 个答案: