前幾天，項目在做一個功能時需要在頁面切換之前關閉正在執行的函數。嘗試了幾種方式都不行，最后想到既然angularjs是通過理由切換頁面，那就在路由上面做文章吧。AngularJS在路由發生改變時，可以通過路由事件來監聽路由是否發生了改變。常用的是狀態包括?$stateChangeStart，$stateChangeSuccess，$stateChangeError，測試代碼以及注釋如下：

var app = angular.module("app", []); //定義app app.run(['$rootScope', '$location', function ($rootScope, $location) { //需要注入服務$rootScope；$location在這可要可不要，這里用來查看獲取新的路由鏈接//路由監聽事件$rootScope.$on('$stateChangeStart',function (event, toState, toParams, fromState, fromParams) {alert("路由的狀態變化開始!");console.log('route begin change');});// stateChangeSuccess 當模板解析完成后觸發$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {alert("路由的狀態變化成功!");console.log('route have already changed ：' + $location.path());});// $stateChangeError 當模板解析過程中發生錯誤時觸發$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {alert("路由的狀態變化失敗!");console.log('route changed failed：');}) }]);

　　在測試時順手截了幾張圖，直觀判斷：

　　　　從China路由切換到Today：點擊Today -> 路由的狀態變化開始 -> 路由的狀態變化成功 -> 新頁面Today渲染；而且可以看到新獲取到的路由新鏈接

　　　　

　　　　

　　　　

　　　　

　　　　Today路由切換到China路由，方式和步驟相同。

　　　　

　　　　

　　　　

?

?　　注意：在測試的過程中，我先用的狀態字段是$routeStartChange和$routeChangeSuccess，但是代碼沒有執行，度娘了下才發現，這兩個關鍵字是ng1在1.5版本之前的，測試時用的1.5以后的版本，所以代碼不執行。

　　　　如果有用到1.5之前版本的，可以試試下面代碼：

var app = angular.module("app", []); //定義app app.run(['$rootScope', '$location', function($rootScope, $location) { //需要注入服務$rootScope；$location在這可要可不要，這里用來查看獲取新的路由鏈接/* 監聽路由的狀態變化 */$rootScope.$on('$routeChangeStart', function(evt, next, current){alert("路由的狀態變化開始!");console.log('route begin change');});/* 路由的狀態變化成功 */$rootScope.$on('$routeChangeSuccess', function(evt, current, previous) {alert("路由的狀態變化成功!");console.log('route have already changed ：'+$location.path());}); }]);

?

　　頁面的加載渲染監聽：路由的切換可以監聽了，那么順便記一下頁面的加載渲染監聽：

　　// 在頁面渲染中可通過$viewContentLoading和$viewContentLoaded監聽頁面渲染狀態：$viewContentLoading(渲染開始)和$viewContentLoaded(渲染結束)。（在控制器中添加以下代碼實現監聽）

　　// $viewContentLoading：當頁面視圖開始加載時，DOM渲染完成之前觸發，該事件將在$scope鏈上廣播此事件。$scope.$watch('$viewContentLoading', function (event, viewConfig) {alert('模板加載完成之前!');});//$viewContentLoaded：當頁面視圖加載完成，DOM渲染完成之后觸發，視圖所在的$scope發出該事件。$scope.$watch('$viewContentLoaded', function (event) {alert('模板已經加載完成!');});

轉載于:https://www.cnblogs.com/donghuang/p/8378666.html

總結

以上是生活随笔為你收集整理的angularjs -- 路由监听的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。