$viewContentLoaded ，$routeChangeStart ， $locationChangeStart 达到用户切换页面的时候实现loading效果

最新推荐文章于 2021-12-18 17:38:40 发布

zhanglongdream

最新推荐文章于 2021-12-18 17:38:40 发布

阅读量2.9k

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/zhanglongdream/article/details/72899886

版权

angular 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

$viewContentLoaded

当ngview被重新加载的时候的传播

$routeChangeStart 属于$route模块使用的路由和切换的路由做对比，路由还没有切换的时候

$locationChangeStart属于$location模块当路由切换完毕的时候的

通过这几个属性我们不用使用ajax的状态管理就能够实现loading效果、

  $scope.$on('$routeChangeStart', function() {
    $scope.vewiAble = false;
    $scope.progressbar.start();
    $_ele('.pika-single', true).remove();
    $_ele('.mainLoading').show();
    if(angular.pikadayArray) {
      angular.pikadayArray.length = 0
    }
  });
  
  angular.edition = document.body.getAttribute('version');

  $scope.$on('$viewContentLoaded', function() {
    $timeout(function() {
      var applyCSS = document.getElementById('APPLY_CSS');
      if(applyCSS) {
        applyCSS.parentNode.removeChild(applyCSS);
      }
      var css = document.getElementById('CACHE_CSS').innerHTML || '',
        head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style');
        css = $$.htmlUnescape(css);
      style.type = 'text/css';
      style.id = 'APPLY_CSS';
      if(style.styleSheet) {
        style.styleSheet.cssText = css;
      }
      else {
        style.appendChild(document.createTextNode(css));
      }
      head.appendChild(style);
      $_ele('.mainLoading').hide();
      $scope.vewiAble = true;
      $scope.progressbar.complete();
    })
  });