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

Question

使用UI路由器，我有一个具有6个子状态的抽象父状态。子状态使用父状态模板上的选项卡加载。使用ng-class，我希望高亮显示活动选项卡。我可以设置一个$scope.active_tab变量，并在用户每次点击一个新标签时对其进行更改，但如果通过url直接导航子状态，则该变量不起作用。

Answer 1

你可以使用UI-S REF-主动指令，它允许你类添加到一个元素时，相关的UI-SREF状态激活

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

Answer 2

如果你有一个抽象的状态是父其他状态，则抽象状态及其控制器将首先加载，那么子状态将在父状态加载完成后加载。

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

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