監測angular路由變化

activity.js

Angular 路由狀態發生改變時能夠經過'$stateChangeStart'、'$stateChangeSuccess'、'$stateChangeError'監聽，經過注入'$location'實現狀態的管理，

 頁面路由變化，模板開始解析以前執行toState.name == 'activity.note' 或 toState.name == 'activity.escapeClause' 爲true時，給body,html添加class 。

 1 var activityApp = angular.module('activityApp', ['ui.router', 'activityControllers']);
 2 
 3 activityApp.run(['$rootScope', '$location', function ($rootScope, $location) {
　　　　// stateChangeStart 當模板開始解析以前觸發
 4     $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
 5         // event.preventDefault()能夠阻止模板解析 
 6         if (toState.name == 'activity.note' || toState.name == 'activity.escapeClause') {
 7             angular.element('body,html').addClass('scroll-bar');
 8         } else {
 9             angular.element('body,html').removeClass('scroll-bar');
10         }
11     });
12     // stateChangeSuccess  當模板解析完成後觸發
13     $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
14 
15     });
16 
17     // $stateChangeError  當模板解析過程當中發生錯誤時觸發  
18     $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
19 
20     });
21 }]);PS：參考官方文檔 https://github.com/angular-ui/ui-router/wiki