观察angular ui路由器的状态变化

Observing state changes in angular-ui-router

本文关键字：状态 变化 路由器 angular ui 观察      更新时间：2023-09-26

据我所知，获得状态更改通知的常用方法是对$stateChangeStart事件进行回调，如下面的回答所示。

然而，如果我理解正确，我也可以将$state对象附加到当前范围，如：

myApp.controller('myAppCtrl', function($scope, $state) {
    $scope.$state = $state;
}

据我所知，这将使直接从HTML模板中查看状态详细信息成为可能，例如（假设我的一些状态有一个布尔标志.isAdminOnlyState设置为true，并且我想在显示它们时使整个页面变红）：

<body ng-class='{"everythingInRed": $state.current.data.isAdminOnlyState}'>

与具有侦听器功能相比，这种方法的优点和缺点是什么？

这取决于您是想全局处理还是在单个控制器/视图上处理，您所描述的方法适用于后者。然而，在您发布的代码中，您需要确保myAppCtrl在应用程序中始终处于活动状态，以便正确更新该ng-class。通过路由，您往往会在给定的时间点（而不是所有时间）激活一个控制器。有人可能会说，这是您发布的方法的缺点，如果您在$rootScope上处理$state更改的事件，则可以将$state.current.data.isAdminOnlyState放在$rootScope上，并相应地进行更新。将其放在根作用域上的一个缺点是（我想）会对性能产生影响，因为对于调用该处理程序的每个状态转换，以及执行处理程序内部的代码，另一个缺点将是将$state.current.data.isAdminOnlyState放在$rootScope上会污染根作用域，这通常是不受欢迎的。话虽如此，如果您打算让myAppCtrl始终处于活动状态，例如让它成为主页面的某个部分的控制器，例如导航栏部分，则在每次状态转换期间仍会对其进行评估。

有点无关紧要：ui路由器有一个指令，可以做你想做的事情，在那个代码片段中，查看ui-sref-active。

相关文章：