快捷導(dǎo)航

AngularJS監(jiān)聽路由的變化示例代碼

更新時間：2016年09月23日 08:33:44 作者：宋俊波

這篇文章給大家分享了如何利用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í)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: