AngularJS：显示加载器图像，直到加载数据
Posted
技术标签:
【中文标题】AngularJS：显示加载器图像，直到加载数据【英文标题】：AngularJS: show loader image until data is loaded 【发布时间】：2016-03-23 11:51:33 【问题描述】：screen image1
screen image2
使用angular js + php显示结果，如何在加载数据之前显示加载器图像，这里我的代码写在下面，
如何让 AngularJS 在数据加载完成之前显示加载图像？
app.js 文件
var app = angular.module('myApp3', ['ui.bootstrap']);
app.filter('startFrom', function()
return function(input, start)
if(input)
start = +start; //parse to int
return input.slice(start);
return [];
);
app.controller('customersCrtl', function ($scope, $http, $timeout)
$http.get('http://www.testurl.com/index.php/site/getprofileLocations').success(function(data)
$scope.list = data;
$scope.currentPage = 1; //current page
$scope.entryLimit = 20; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
);
$scope.setPage = function(pageNo)
$scope.currentPage = pageNo;
;
$scope.filter = function()
$timeout(function()
$scope.filteredItems = $scope.filtered.length;
, 10);
;
$scope.sort_by = function(predicate)
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
;
);
这里有php代码
<html ng-app="myApp3" ng-app lang="en">
<div ng-controller="customersCrtl">
<div class="content" >
<div class="row">
<div class="col-md-2">PageSize:
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
</div>
<div class="col-md-4">
<h5>Filtered filtered.length Of totalItems Total Locations</h5>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" ng-show="filteredItems > 0">
<table class="table table-striped table-bordered">
<thead>
<th>Id <a ng-click="sort_by('id');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Place Name <a ng-click="sort_by('name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Category ID <a ng-click="sort_by('category_name');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>data.id</td>
<td>data.name</td>
<td>data.category_name</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No Locations found</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</div>
</div>
</div>
</div>
<script src="<?php echo Yii::app()->baseUrl; ?>/angular/js/angular.min.js"></script>
<script src="<?php echo Yii::app()->baseUrl; ?>/angular/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="<?php echo Yii::app()->baseUrl; ?>/angular/app/app.js"></script>
</html>
【问题讨论】：
【参考方案1】：显示加载器 onload 并在数据加载后隐藏它。
$scope.showLoader = true;
$http.get('http://www.testurl.com/index.php/site/getprofileLocations').success(function(data)
$scope.showLoader = false;
// rest of your code
);
编辑：来自 Saeed 答案的 html 代码
<div ng-show="showLoader"><!-- so this div containing img will be dislpayed only when the showLoader is equal to true-->
<img src="source"> <!-- or any other spinner -->
</div>
【讨论】：
先生，我已经做了，图片附在上面的问题上，请看上面的图片 我想要的是，当显示加载器时，屏幕 1 图像显示代码部分没有显示。 使用 ngCloak 来防止 Angular html 模板在您的应用程序加载时被浏览器以其原始（未编译）形式短暂显示。检查这个***.com/a/12866739/1398867和***.com/a/17906446/1398867 @sairam：你能创建一个 jsfiddle 并在那里复制你的问题吗，htpp://jsfiddle.net【参考方案2】：除了@Venugopal 的回答。 在 html 中显示加载图像
<div ng-show="showLoader"><!-- so this div containing img will be dislpayed only when the showLoader is equal to true-->
<img src="source"> <!-- or any other spinner -->
</div>
【讨论】：
先生，我已经做了，图片附在上面的问题上，请看上面的图片 我想要的是，当显示加载器时，屏幕 1 图像显示代码部分没有显示。【参考方案3】：您需要在 ajax 调用之前显示加载器图像，并在成功和错误处理程序中完成后将其删除。
您会在网上找到大量加载程序图像，您可以将其用于您的应用程序。
JS 代码
//show the loader image in center of screen & prevent any user interactions
$scope.imLoading = true;
$http.get('http://www.testurl.com/index.php/site/getprofileLocations').then(
function(data)
//hide the loader image & process successful data.
$scope.imLoading = false;
, function (errorData)
//hide the loader image & show error message to user
$scope.imLoading = false;
);
CSS：
.im_loading
display:none;
position:fixed;
top:50%;
left:50%;
margin:-35px 0px 0px -35px;
background:#fff url(../images/loader.gif) no-repeat center center;
width:70px;
height:70px;
z-index:9999;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
HTML 代码：
<div class="im_loading" ng-show:"imLoading"></div>
注意：您的代码只处理成功的 ajax 调用而不是错误调用，这不好，因为当返回错误时您的代码变得无响应，因此您还需要处理错误情况。 p>
【讨论】：
【参考方案4】：你可以做一件事：
默认隐藏您的 html 内容 收到回复时显示喜欢：
<div class="content" ng-show="!showLoader">
.....
</div>
因此，在您从服务器获取数据之前，仅使用这个加载器就会显示出来。
【讨论】：
【参考方案5】：每当我们在 AngularJS 中使用 HTTP 调用时，我们希望默认显示加载图像。所以在这里，我们将通过使用自定义指令来实现这一点。
JS 代码
var app = angular.module('appMyCustomModule',[]);
app.directive('dirCustomLoader', ['$http', function ($http)
return
restrict: 'E',
template: '<div class="loading-icon"></div>',
link: function (scope, element, attrs)
scope.isLoading = function ()
return $http.pendingRequests.length > 0;
;
scope.$watch(scope.isLoading, function (value)
if (value)
element.removeClass('ng-hide');
else
element.addClass('ng-hide');
);
;
]);
CSS：
.loading-icon
background: url(static image url) no-repeat scroll center #fff;
display: inline-block;
font-size: 0;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999999999999999999 !important;
opacity: .5;
HTML 代码：
<dir-custom-loader class="ng-hide"></dir-custom-loader>
【讨论】：
【参考方案6】：有一种更好的方法可以防止显示两个图标，例如：
（不好的方式）
当 Angular 操作 DOM 时，它可以在隐藏加载图标之前显示搜索图标。这就是为什么有两个元素不好。
<i class="fa fa-search" ng-hide="loadingData" ></i>
<i class="fa fa-circle-o-notch fa-spin" ng-show="loadingData"></i>
（好方法）
这种方式可以防止在 Angular 隐藏和显示元素时显示加载和搜索图标。
<i class="fa" ng-class="loadingData ? 'fa-circle-o-notch fa-spin' : 'fa-search' " ></i>
脚本会是这样的。
$scope.clickEventThatDoSomething = function ()
$scope.loadingData = true;
http.get('http://YourAPIUrl').then(function (data)
$scope.loadingData = false;
$scope.data = data.data;
).catch(function (err)
$scope.loadingData = false;
)
【讨论】：
以上是关于AngularJS：显示加载器图像，直到加载数据的主要内容，如果未能解决你的问题，请参考以下文章
如果 iframe 无法在 src 加载资源，如何显示替代图像？使用 AngularJs？