ui-sref-active 不影响父元素

Question

希望不是重复的，但我找到的所有其他答案都与州有关。

这有效，但我也希望父 <li> 也受到影响。

<ul class="collapsible" data-collapsible="accordion">
  <li ng-repeat="title in sidebar.title">
    <div class="collapsible-header waves-effect waves-green"><a ui-sref="#"><i ng-class="title.icon"></i>{{title.name}}</a></div>

    <div class="collapsible-body">
      <ul>
        <li ng-repeat="subcat in title.subtitle" ui-sref-active="collapsible-body-active">
          <a class="waves-effect waves-yellow"  ui-sref="{{subcat.state}}">{{subcat.name}}</a>
        </li>
      </ul>
    </div>
  </li>
</ul>

因此，如果我正确理解文档，我应该能够做到这一点，但它不起作用：

<ul class="collapsible" data-collapsible="accordion">
  <li ng-repeat="title in sidebar.title" ui-sref-active="collapsible-body-active">
    <div class="collapsible-header waves-effect waves-green"><a ui-sref="#"><i ng-class="title.icon"></i>{{title.name}}</a></div>

    <div class="collapsible-body">
      <ul>
        <li ng-repeat="subcat in title.subtitle">
          <a class="waves-effect waves-yellow"  ui-sref="{{subcat.state}}">{{subcat.name}}</a>
        </li>
      </ul>
    </div>
  </li>

我是不是误解了文档？

Answer 1

有a working example，说明这个场景应该可行。但是 - 如果我们有正确的 ui-sref

它就会起作用

// this won't work, because there is missing key setting: ui-sref
// without that, the ui-sref-active cannot work
<li ui-sref-active="selected">
    <a href="#/home" >home</a>
</li>
// this will work as expected
<li ui-sref-active="selected">
    <a ui-sref="parent">parent</a>
</li>

你的场景有什么不同？我怀疑上面的代码片段中的状态名称是“#”：

...<a ui-sref="#">..

状态会像 'subcat.state'，然后这应该有效

...<a ui-sref="subcat.state">..

你可以玩here

ui-sref-active 不影响父元素

ui-sref-active not affecting parent element

angularjs

angular-ui-router

ui-sref