Question

我希望在任何api调用之前显示一个加载器，在getiing响应后隐藏加载器。它应该像通用的一样，我已经尝试过检查器而不能为我工作。

Answer 1

您可以使用angular-load-bar，只要有待处理的请求，它就会使用拦截器来显示加载栏。

http://chieffancypants.github.io/angular-loading-bar/

Answer 2

使用指令创建loader。将父元素添加到loader元素。

loader.directive.js

app.directive('loaderDir', function(){
  return{
     restrict: 'AE',
     scope:{},
     template: 'loader template here.......',
  }
})

的index.html

   <body>
      <div loader-dir class="loader-holder" id="loader-holder"></div>    //better make this as last child
   </body>

styles.css的

.loader-holder{
   display: none;
}
.loader-show{
   display: inline-block;
}

ajaxCall.service.js

function makeRequest(){
  //when you are going to make request, show loader that means addClass `loader-show`
  angular.element(document.getElementById('loader-holder')).addClass('loader-show');
  $http.get(url).then(function success(response){
   // on successful response, hide loader that means removeClass `loader-show`
     angular.element(document.getElementById('loader-holder')).removeClass('loader-show');
  })
}

如何在角应用程序中添加加载程序

2 个答案: