css - UI-Router 状态监听器指令

Question

我在使用 UI-Router 的 Angular 中有一个 ul 列表。它根据 $scope 数据创建一个列表，并根据状态正确标记 anchor 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。非常感谢所有反馈!

Answer 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>