UI-Router 状态监听器指令答案

【问题标题】：UI-Router State Listener DirectiveUI-Router 状态监听器指令
【发布时间】：2014-01-22 13:02:04
【问题描述】：

我在 Angular 中有一个使用 UI-Router 的 ul 列表。它根据$scope 数据创建一个列表，并根据状态正确标记锚active。但是，我很难找到一种优雅的方式来将 li 父级标记为活动以进行样式设置。

HTML：

<ul>
    <li ng-repeat="item in items">
        <a ui-sref="{{item.sref}}" ui-sref-active="active">
            {{item.name}}
        </a>
    </li>
</ul>

JSON：

$scope.items = [
    {name:'Foo Stuff',sref:'foo'},
    {name:'Bar Things',sref:'bar'},
]

我希望有一些 CSS 作弊代码可以让我根据子元素的类来设置元素的样式。如果可能的话，我想在不添加任何额外框架的情况下找到解决方案。现在我正在使用 Angular JS、UI-Bootstrap 和 UI-Router。非常感谢所有反馈！

【问题讨论】：

标签： css angularjs angular-ui-router

【解决方案1】：

当然，我在发布问题后 0.69 秒就知道了。这似乎很简单，以至于我质疑它的正确性。我刚刚将ui-sref-active="active 移至父级li。

HTML：

<ul>
    <li ng-repeat="item in items" ui-sref-active="active>
        <a ui-sref="{{item.sref}}">
            {{item.name}}
        </a>
    </li>
</ul>

【讨论】：