如何使用angularjs服务制作ajax加载组件?

时间:2014-08-28 06:30:43

标签: ajax angularjs

当浏览器等待从json加载数据时,我想创建一个特定的组件来显示加载图标。有没有办法通过使用服务来做到这一点? html:

<html ng-app="app">
<head>
<title> ERP </title>

</head>

<body >

    <div ng-controller="data"><span class="loading" ng-show="loader"><img src="ajax-loader.gif"></span>
        <table>
            <tr><td>{{data1}}</td><td>{{data1}}</td><td>{{data1}}</td></tr>
</table>
     </div>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
     <script type="text/javascript" src="ctrl.js"></script>
</body>
</html>

js:

var app = angular.module('app',[]);
app.controller('data', ['$scope','$http',function($scope,$http){
  $scope.loader = null ;
  if($scope.loader == null )
  {
    $scope.loader = true ;
  }
      $http.get('events.json').
    success(function(data) {
      $scope.loader = false ;
      console.log(data);
      $scope.data1 = data ;
      console.log($scope.data1);

    }).
    error(function(data, status, headers, config) {
    });
}]);

1 个答案:

答案 0 :(得分:0)

您可以打包原始$http以提供customizedHttp服务。在此服务中,提供与$http相同的界面。当向服务器发送GET请求时,customizedHttp广播一个事件以显示加载标志。并在收到响应后,广播另一个事件以隐藏加载标志。

控制标志,你最好写一个指令。