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>

这也应该可以解决问题。