观察angular-ui-router中的状态变化

Question

As far as I understand, the usual way to get a notification on a state change is to put a callback on the $stateChangeStart event, like in this answer . 据我了解，获取状态更改通知的常用方法是在$stateChangeStart事件上进行回调，就像在这个答案中一样。

However, if I understand correctly, I could also attach the $state object to the current scope, as in: 但是，如果我理解正确，我还可以将$ state对象附加到当前作用域，如下所示：

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

This, as far as I understand, would make it possible to watch state details directly from HTML templates, eg (assuming some of my states have a boolean flag .isAdminOnlyState set to true and I wanted to make the whole page red when displaying them): 据我所知，这可以直接从HTML模板中查看状态详细信息，例如（假设我的某些状态有一个布尔标志.isAdminOnlyState设置为true，我希望在显示时将整个页面设置为红色）：

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

What are advantages and disadvantages of this approach, as compared to having a listener function? 与具有监听功能相比，这种方法的优点和缺点是什么？

Answer 1

It depends if you want to handle something globally or on a single controller/view, the approach you describe is suitable in the case of the latter. 这取决于您是想要在全局还是在单个控制器/视图上处理某些内容，您所描述的方法适用于后者。 However in the code you posted, you need to ensure that myAppCtrl is always active in your app for that ng-class to be updated correctly. 但是，在您发布的代码中，您需要确保myAppCtrl在您的应用中始终处于活动状态，以便正确更新该ng-class 。 With routing you tend to have a controller(s) active at a given point in time, not all the time. 通过路由，您倾向于在给定时间点激活控制器，而不是始终。 One could argue that this is a disadvantage of the approach you posted, if you handle a $state changed event on the $rootScope you could put $state.current.data.isAdminOnlyState on the $rootScope and have it updated accordingly. 有人可能会说，这是你贴的方法的缺点，如果你处理$state改变事件的$rootScope你可以把$state.current.data.isAdminOnlyState在$rootScope并已将其相应的更新。 A disadvantage of putting this on the root scope would be (I imagine) a performance impact, since for every state transition that handler is called, and the code inside the handler is executed, another disadvantage would be that by putting $state.current.data.isAdminOnlyState on the $rootScope pollutes the root scope which is usually frowned upon. 把它放在根作用域上的一个缺点是（我想）会影响性能，因为对于调用处理程序的每个状态转换，并且执行处理程序内的代码，另一个缺点是通过放置$state.current.data.isAdminOnlyState $rootScope上的$state.current.data.isAdminOnlyState污染了通常$state.current.data.isAdminOnlyState的根范围。 Having said that, if you intend to have myAppCtrl active at all times, for example have it be the controller of a section of your main page, such as the navigation bar section for example, it would still be evaluated during every state transition. 话虽如此，如果您打算让myAppCtrl处于活动状态，例如让它成为主页的某个部分的控制器，例如导航栏部分，则仍会在每个状态转换期间对其进行评估。

Somewhat irrelevant: ui router has a directive to do what you want to that in that code snippet, check out ui-sref-active . 有些不相关：ui路由器有一个指令，可以在该代码片段中执行您想要的操作，请查看ui-sref-active 。

观察angular-ui-router中的状态变化

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-09-18 05:05:22

观察angular-ui-router中的状态变化

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-09-18 05:05:22

解决方案1
1 已采纳 2014-09-18 05:05:22