【轉載】AngularJS監聽路由變化

魔豆發表於2016-10-07
AngularJS路由

一、Angular 路由狀態發生改變時可以通過' $stateChangeStart '、' $stateChangeSuccess '、' $stateChangeError '監聽，通過注入'$location'實現狀態的管理。

程式碼示例如下：

function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { 
  //路由監聽事件 
  $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") { 
      //獲取引數之後可以調請求判斷需要渲染什麼頁面，渲染不同的頁面通過 $location 實現 
      if (toParams.id == 10) { 
       //$location.path();//獲取路由地址 
       // $location.path('/validation').replace(); 
       // event.preventDefault()可以阻止模板解析 
      } 
     } 
    }) 
   // stateChangeSuccess 當模板解析完成後觸發 
  $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) { 
  
  }) 
  
  // $stateChangeError 當模板解析過程中發生錯誤時觸發 
  $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { 
  
  }) 
 }

 

二、在頁面渲染中 可通過' $viewContentLoading '和 ' $viewContentLoaded '監聽頁面渲染狀態：渲染開始和渲染結束。

在控制器中新增以下程式碼實現監聽：

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

相關文章