如何让抽象的父状态知道哪个子状态是活动的？

Question

使用UI路由器，我有一个抽象的父状态，有6个子状态。使用父状态模板上的选项卡加载子状态。使用ng-class，我希望突出显示活动标签。我可以设置$scope.active_tab变量，并在每次用户点击新标签时更改它，但如果通过网址直接导航到子状态，那么该变量就无法运行。

Answer 1

您可以使用ui-sref-active指令，它允许您在相关的ui-sref状态处于活动状态时向元素添加类

<ul>
  <li ui-sref-active="active" class="item">
    <!-- ... -->
  </li>
  <!-- ... -->
</ul>

Answer 2

如果您的抽象状态是其他状态的父级，则抽象状态及其控制器将加载优先，然后在父状态加载完成后加载子状态

在父控制器中，您可以侦听$ stateChangeSuccess事件，并在那里执行逻辑。

$scope.$on('$stateChangeSuccess', function (event) {
    // perform your logic here
});