监测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

 

 

posted @ 2017-03-24 17:27  会捕鼠的鱼  阅读(690)  评论(0)  编辑  收藏  举报