Question

我想使用指令创建一个ajax loader。在链接功能我使用显示和隐藏功能但我得到错误

elem.show is not a function
at Object.fn (loaderDirectives.js:15)
at Scope.$digest (angular.js:11814)
at Scope.$apply (angular.js:12067)
at done (angular.js:7838)
at completeRequest (angular.js:8026)
at XMLHttpRequest.xhr.onreadystatechange (angular.js:7982)

 elem.hide is not a function
at Object.fn (loaderDirectives.js:17)
at Scope.$digest (angular.js:11814)
at Scope.$apply (angular.js:12067)
at done (angular.js:7838)
at completeRequest (angular.js:8026)
at XMLHttpRequest.xhr.onreadystatechange (angular.js:7982)

我的指令代码是

 angular.module('movieApp.loader.directives', []).directive('loaderDirective',['$http',function($http){
    return{
        restrict : 'A',
        link: function(scope, elem, attr){
            scope.isLoading = function(){
                return $http.pendingRequests.length > 0;
            };
            scope.$watch(scope.isLoading, function(v){
                if(v){
                    elem.show();
                }else{
                    elem.hide();
                }
            })
        }
    };
}]);

Answer 1

查看documentation。 AngularJS的jqLite中没有-1或show()函数。

Answer 2

使用模板中的ng-show解决了该问题。

  angular.module('movieApp.loader.directives', []).directive('loaderDirective',['$http',function($http){
    return{
        transclude: true,
        restrict : 'AEC',
        template: '<img  ng-show="showElem" src="assets/img/giphy.gif" alt="loading...">',
        link: function(scope, elem, attr){
            scope.isLoading = function(){
                return $http.pendingRequests.length > 0;
            };
            scope.$watch(scope.isLoading, function(v){
                if(v){
                     scope.showElem = true;
                }else{
                     scope.showElem = false;
                }
            })
        }
    };
}]);

Answer 3

我可能错了，但如果您尝试在加载数据时进行简单的叠加，我认为您的方法并不是那么好。

想象一下你调用的函数，它会响应数据。在获得数据后，您可能会使用promises将数据公开到范围。在调用Ajax请求之前，你应该使用ng-show =“isLoading”将一些变量isLoading放到overlay div并将其设置为true，从promise中获取数据后，如果它被拒绝，则设置该变量isLoading = false 。如果请求正在进行中，叠加将显示/隐藏。

如果你把更多的代码放在一些小提琴上，我可以帮助你。你也没有正确使用元素，在你需要jQuery的元素上使用.show（）和.hide（）。

指令链接功能

3 个答案: