如何實現加載指令AngularJS

Question

我正在嘗試實現加載狙擊手...但是問題是當我將狙擊手放在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){

有人知道是什么問題嗎？

Answer 1

檢查工作演示： 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>