AngularJS监听路由的变化示例代码

 更新时间:2016年09月23日 08:33:44   作者:宋俊波  
这篇文章给大家分享了如何利用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) { 
 
  }) 
 } 

【2】在页面渲染中 可通过' $viewContentLoading '和 ' $viewContentLoaded '监听页面渲染状态:渲染开始和渲染结束。

(在控制器中添加以下代码实现监听)

// $viewContentLoading- 当视图开始加载,DOM渲染完成之前触发,该事件将在$scope链上广播此事件。 
scope.$watch('$viewContentLoading',function(event, viewConfig){ 
 alert('模板加载完成前'); 
}); 
//$viewContentLoaded- 当视图加载完成,DOM渲染完成之后触发,视图所在的$scope发出该事件。 
$scope.$watch('$viewContentLoaded',function(event){ 
  alert('模板加载完成后'); 
}); 

总结

以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

  • Angular2 http jsonp的实例详解

    Angular2 http jsonp的实例详解

    这篇文章主要介绍了Angular2 http jsonp的实例详解的相关资料,希望通过本能帮助到大家,需要的朋友可以参考下
    2017-08-08
  • 解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题

    本篇文章主要介绍了解决AngualrJS页面刷新导致异常显示问题的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • angular4 JavaScript内存溢出问题

    angular4 JavaScript内存溢出问题

    本篇文章主要介绍了angular4 JavaScript内存溢出问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Angular-Touch库用法示例

    Angular-Touch库用法示例

    这篇文章主要介绍了Angular-Touch库用法,结合触屏滑动事件的实现为例分析了Angular-Touch库的相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • AngularJS内建服务$location及其功能详解

    AngularJS内建服务$location及其功能详解

    这篇文章主要为大家详细介绍了AngularJS内建服务$location及$location功能,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • AngularJS转换响应内容

    AngularJS转换响应内容

    这篇文章主要介绍了AngularJS转换响应内容 的相关资料,需要的朋友可以参考下
    2016-01-01
  • angularJS 中$attrs方法使用指南

    angularJS 中$attrs方法使用指南

    这篇文章主要介绍了angularJS 中$attrs方法使用指南,需要的朋友可以参考下
    2015-02-02
  • angular分页指令操作

    angular分页指令操作

    这篇文章主要为大家详细介绍了angular分页指令操作的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Angular6升级到Angular8报错问题的解决合集

    Angular6升级到Angular8报错问题的解决合集

    这篇文章主要介绍了Angular6升级到Angular8报错问题的解决合集,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Angular中响应式表单的三种更新值方法详析

    Angular中响应式表单的三种更新值方法详析

    这篇文章主要给大家详细解析了关于Angular中响应式表单的三种更新值方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08

最新评论