angular 路由監控
工具/原料
angular環境
電腦
方法/步驟
用$rootScope.$on來監聽事件的發生
app.run(['$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager', function($rootScope, $location, $cookieStore, $state,CacheManager){
//監聽路由事件
$rootScope.$on('監控事件',
function(event, toState, toParams, fromState, fromParams){ ... }
}]);
監控的事件可以為：
$stateChangeStart- 當模板開始解析之前觸發
$stateChangeSuccess- 當模板解析完成後觸發
$stateChangeError- 當模板解析過程中發生錯誤時觸發
$viewContentLoading- 當檢視開始載入，DOM渲染完成之前觸發，該事件將在$scope鏈上廣播此事件。
$viewContentLoaded- 當檢視載入完成，DOM渲染完成之後觸發，檢視所在的$scope發出該事件。
使用event.preventDefault()可以阻止模板解析的發生
//event.preventDefault(); cancel url change
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
event.preventDefault();
})
$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
console.log('$stateChangeStart');
});
$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
console.log('$stateChangeSuccess');
});
$rootScope.$on('$viewContentLoading',function(event, toState, toParams, fromState, fromParams){
console.log('$viewContentLoading');
});
$rootScope.$on('$viewContentLoaded',function(event, toState, toParams, fromState, fromParams){
console.log('$viewContentLoaded');
});
結果如圖。
