AngularJS監(jiān)聽路由的變化示例代碼
話不多說,我們下面直接來看實(shí)現(xiàn)的示例代碼
【一】Angular 路由狀態(tài)發(fā)生改變時(shí)可以通過' $stateChangeStart
'、' $stateChangeSuccess
'、' $stateChangeError
'監(jiān)聽,通過注入'$location'實(shí)現(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)請(qǐng)求判斷需要渲染什么頁面,渲染不同的頁面通過 $location 實(shí)現(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ā)生錯(cuò)誤時(shí)觸發(fā) $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { }) }
【2】在頁面渲染中 可通過' $viewContentLoading
'和 ' $viewContentLoaded
'監(jiān)聽頁面渲染狀態(tài):渲染開始和渲染結(jié)束。
(在控制器中添加以下代碼實(shí)現(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)容,希望能對(duì)大家的學(xué)習(xí)或者工作帶來一定的幫助,如果有疑問大家可以留言交流。
- 用director.js實(shí)現(xiàn)前端路由使用實(shí)例
- director.js實(shí)現(xiàn)前端路由使用實(shí)例
- vue.js使用watch監(jiān)聽路由變化的方法
- VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
- JS實(shí)現(xiàn)簡(jiǎn)單路由器功能的方法
- AngularJS路由實(shí)現(xiàn)頁面跳轉(zhuǎn)實(shí)例
- AngularJS 路由詳解和簡(jiǎn)單實(shí)例
- react-router JS 控制路由跳轉(zhuǎn)實(shí)例
- 使用AngularJS對(duì)路由進(jìn)行安全性處理的方法
- JS實(shí)現(xiàn)前端路由功能示例【原生路由】
相關(guān)文章
實(shí)例剖析AngularJS框架中數(shù)據(jù)的雙向綁定運(yùn)用
這篇文章主要介紹了AngularJS框架中數(shù)據(jù)的雙向綁定運(yùn)用實(shí)例,包括數(shù)據(jù)綁定中的關(guān)鍵函數(shù)與監(jiān)聽器觸發(fā)的相關(guān)講解,需要的朋友可以參考下2016-03-03ios設(shè)備中angularjs無法改變頁面title的解決方法
今天小編就為大家分享一篇ios設(shè)備中angularjs無法改變頁面title的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular實(shí)現(xiàn)的日程表功能【可添加及隱藏顯示內(nèi)容】
這篇文章主要介紹了Angular實(shí)現(xiàn)的日程表功能,帶有向日程表中添加內(nèi)容及隱藏顯示內(nèi)容的功能,涉及AngularJS事件響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12angular 動(dòng)態(tài)組件類型詳解(四種組件類型)
這篇文章給大家講解四種組件類型,非常不錯(cuò),具有參考借鑒價(jià)值,對(duì)angular 動(dòng)態(tài)組件類型感興趣的朋友參考下吧2017-02-02Angular5中調(diào)用第三方庫及jQuery的添加的方法
這篇文章主要介紹了Angular5中調(diào)用第三方庫及jQuery的添加的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06Angular.js通過自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)效果
這篇文章主要給大家介紹了關(guān)于Angular.js如何通過自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-10-10如何通過簡(jiǎn)單的代碼描述Angular父組件、子組件傳值
Vue組件是學(xué)習(xí)Vue框架最比較難的部分,下面這篇文章主要給大家介紹了關(guān)于如何通過簡(jiǎn)單的代碼描述Angular父組件、子組件傳值的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法
本篇文章主要介紹了Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04