[英]How to implement loading directive AngularJS
我正在尝试实现加载狙击手...但是问题是当我将狙击手放在html内时它不起作用。 这是我的直言:
angular.module('commentsApp', [])
.directive('loading', loading);
function loading($http) {
return {
restrict: 'A',
link: function (scope, elm, attrs)
{
scope.isLoading = function () {
return $http.pendingRequests.length > 0;
};
scope.$watch(scope.isLoading, function (v)
{
if (v) {
elm.show();
} else {
elm.hide();
}
});
}
};
}
这是我的html:
<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" /></div></div>
在我的commentsController中,我这样添加:
angular.module('commentsApp')
.controller('CommentsCtrl',function(loading){
有人知道是什么问题吗?
检查工作演示: JSFiddle 。 您的问题可能仅仅是因为angular.element
没有show
和hide
功能。
scope.isLoading = function () {
scope.remained = $http.pendingRequests.length;
return $http.pendingRequests.length > 0;
};
scope.iAmLoading = scope.isLoading();
scope.$watch(scope.isLoading, function (v) {
scope.iAmLoading = v;
if (!v) console.log('All loaded');
});
和HTML:
<div ng-show="iAmLoading" loading>Loading ({{ remained }} remainded) ...</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.