2014-08-28 43 views
1

當瀏覽器等待從json加載數據時,我想製作一個顯示加載圖標的特定組件。有沒有任何可能的方式來使用服務? HTML:如何使用angularjs服務製作ajax加載組件?

<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) { 
    }); 
}]); 
+0

你的實現有什麼問題?而且,請使用正確的縮進。 – Kousha 2014-08-28 06:44:32

回答

0

你可以用原來的$http提供customizedHttp服務。在此服務中,請提供與$http相同的界面。當向服務器發送GET請求時,customizedHttp廣播一個事件以顯示加載標誌。並在收到響應後,播放另一個事件以隱藏加載標誌。

要控制標誌,最好寫一條指令。

相關問題