話不多說,我們下面直接來看實現的示例代碼
【一】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) { }) }
【2】在頁面渲染中 可通過' $viewContentLoading
'和 ' $viewContentLoaded
'監聽頁面渲染狀態:渲染開始和渲染結束。
(在控制器中添加以下代碼實現監聽)
// $viewContentLoading- 當視圖開始加載,DOM渲染完成之前觸發,該事件將在$scope鏈上廣播此事件。 scope.$watch('$viewContentLoading',function(event, viewConfig){ alert('模板加載完成前'); }); //$viewContentLoaded- 當視圖加載完成,DOM渲染完成之后觸發,視圖所在的$scope發出該事件。 $scope.$watch('$viewContentLoaded',function(event){ alert('模板加載完成后'); });
總結
以上就是這篇文章的全部內容,希望能對大家的學習或者工作帶來一定的幫助,如果有疑問大家可以留言交流。
新聞熱點
疑難解答