当浏览器等待从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) {
});
}]);
答案 0 :(得分:0)
您可以打包原始$http
以提供customizedHttp
服务。在此服务中,提供与$http
相同的界面。当向服务器发送GET
请求时,customizedHttp
广播一个事件以显示加载标志。并在收到响应后,广播另一个事件以隐藏加载标志。
控制标志,你最好写一个指令。