javascript - ui-sref-active 在多个状态

Question

我希望 ui-sref-active 在多个状态下处于事件状态。这是我的

 <a ui-sref-active="active"  ui-sref="first"><span>1</span> test1</a>
 <a ui-sref-active="active"  ui-sref="fourth"><span>2</span> test2</a>

如您所见，当状态为第一个时，test1 将处于事件状态，而当状态为第四时，test2 将处于事件状态。但我希望 test1 也对第二和第三状态有效。我该怎么做？

Answer 1

我建议使用 includedByState 过滤器。

<a ui-sref="first" ng-class="{active: ('first' | includedByState) || ('second' | includedByState) || ('third' | includedByState)}">
  <span>1</span> test1
</a>
<a ui-sref-active="active" ui-sref="fourth">
  <span>2</span> test2
</a>

这将生成一些代码，但会执行您想要的操作。

或者，您可以在组件中创建一个函数来处理逻辑:

//component function
activateTest() {
  return $filter('includedByState')('first') || 
    $filter('includedByState')('second') || 
    $filter('includedByState')('third');
}

//html
<a ui-sref="first" ng-class="{active: $ctrl.activateTest()}">
  <span>1</span> test1
</a>

这也应该可以解决问题。