AngularJS監(jiān)聽路由的變化示例代碼
話不多說,我們下面直接來看實現(xiàn)的示例代碼
【一】Angular 路由狀態(tài)發(fā)生改變時可以通過' $stateChangeStart
'、' $stateChangeSuccess
'、' $stateChangeError
'監(jiān)聽,通過注入'$location'實現(xiàn)狀態(tài)的管理
代碼示例如下:
function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由監(jiān)聽事件 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { console.log(event); console.log(toState); console.log(toParams); console.log(fromState); console.log(fromParams); if (toState.name == "homePage") { //獲取參數(shù)之后可以調(diào)請求判斷需要渲染什么頁面,渲染不同的頁面通過 $location 實現(xiàn) if (toParams.id == 10) { //$location.path();//獲取路由地址 // $location.path('/validation').replace(); // event.preventDefault()可以阻止模板解析 } } }) // stateChangeSuccess 當(dāng)模板解析完成后觸發(fā) $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) { }) // $stateChangeError 當(dāng)模板解析過程中發(fā)生錯誤時觸發(fā) $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { }) }
【2】在頁面渲染中 可通過' $viewContentLoading
'和 ' $viewContentLoaded
'監(jiān)聽頁面渲染狀態(tài):渲染開始和渲染結(jié)束。
(在控制器中添加以下代碼實現(xiàn)監(jiān)聽)
// $viewContentLoading- 當(dāng)視圖開始加載,DOM渲染完成之前觸發(fā),該事件將在$scope鏈上廣播此事件。 scope.$watch('$viewContentLoading',function(event, viewConfig){ alert('模板加載完成前'); }); //$viewContentLoaded- 當(dāng)視圖加載完成,DOM渲染完成之后觸發(fā),視圖所在的$scope發(fā)出該事件。 $scope.$watch('$viewContentLoaded',function(event){ alert('模板加載完成后'); });
總結(jié)
以上就是這篇文章的全部內(nèi)容,希望能對大家的學(xué)習(xí)或者工作帶來一定的幫助,如果有疑問大家可以留言交流。
相關(guān)文章
實例剖析AngularJS框架中數(shù)據(jù)的雙向綁定運用
這篇文章主要介紹了AngularJS框架中數(shù)據(jù)的雙向綁定運用實例,包括數(shù)據(jù)綁定中的關(guān)鍵函數(shù)與監(jiān)聽器觸發(fā)的相關(guān)講解,需要的朋友可以參考下2016-03-03ios設(shè)備中angularjs無法改變頁面title的解決方法
今天小編就為大家分享一篇ios設(shè)備中angularjs無法改變頁面title的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular實現(xiàn)的日程表功能【可添加及隱藏顯示內(nèi)容】
這篇文章主要介紹了Angular實現(xiàn)的日程表功能,帶有向日程表中添加內(nèi)容及隱藏顯示內(nèi)容的功能,涉及AngularJS事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-12-12Angular5中調(diào)用第三方庫及jQuery的添加的方法
這篇文章主要介紹了Angular5中調(diào)用第三方庫及jQuery的添加的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06Angular.js通過自定義指令directive實現(xiàn)滑塊滑動效果
這篇文章主要給大家介紹了關(guān)于Angular.js如何通過自定義指令directive實現(xiàn)滑塊滑動的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-10-10angularjs的單選框+ng-repeat的實現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular HMR(熱模塊替換)功能實現(xiàn)方法
本篇文章主要介紹了Angular HMR(熱模塊替換)功能實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04