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>

你的方案有什么不同？我怀疑状态名称是“#”，如上面的 sn-p：

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

状态就像'subcat.state'，然后这应该可以工作

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

你可以和here一起玩