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

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

這篇文章給大家分享了如何利用AngularJS監(jiān)聽(tīng)路由的變化，文中給出了示例代碼相信對(duì)大家的理解很有幫助，有需要的朋友們可以參考借鑒。

話不多說(shuō)，我們下面直接來(lái)看實(shí)現(xiàn)的示例代碼

【一】Angular 路由狀態(tài)發(fā)生改變時(shí)可以通過(guò)' $stateChangeStart '、' $stateChangeSuccess '、' $stateChangeError '監(jiān)聽(tīng)，通過(guò)注入'$location'實(shí)現(xiàn)狀態(tài)的管理

代碼示例如下：

function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { 
  //路由監(jiān)聽(tīng)事件 
  $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)求判斷需要渲染什么頁(yè)面，渲染不同的頁(yè)面通過(guò) $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)模板解析過(guò)程中發(fā)生錯(cuò)誤時(shí)觸發(fā) 
  $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { 
 
  }) 
 }

【2】在頁(yè)面渲染中可通過(guò)' $viewContentLoading '和 ' $viewContentLoaded '監(jiān)聽(tīng)頁(yè)面渲染狀態(tài)：渲染開(kāi)始和渲染結(jié)束。

（在控制器中添加以下代碼實(shí)現(xiàn)監(jiān)聽(tīng)）

// $viewContentLoading- 當(dāng)視圖開(kāi)始加載，DOM渲染完成之前觸發(fā)，該事件將在$scope鏈上廣播此事件。 
scope.$watch('$viewContentLoading',function(event, viewConfig){ 
 alert('模板加載完成前'); 
}); 
//$viewContentLoaded- 當(dāng)視圖加載完成，DOM渲染完成之后觸發(fā)，視圖所在的$scope發(fā)出該事件。 
$scope.$watch('$viewContentLoaded',function(event){ 
  alert('模板加載完成后'); 
});

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容，希望能對(duì)大家的學(xué)習(xí)或者工作帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章: