Question

我使用UI-Router在Angular中有一个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。所有反馈都非常感谢！

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>

UI路由器状态监听器指令

1 个答案: