Fonction de liaison de directive

Question

Je souhaite créer une instruction de chargement ajax. En fonction de lien que j'utilise show et la fonction cacher mais je suis erreur

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) 

Mon code directive est

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

Jetez un oeil à la documentation. Il n'y a pas de fonction show() ou hide() dans la jqLite d'AngularJS.

Answer 2

Le problème est résolu à l'aide de ng-show dans le modèle.

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

Je peux me tromper, mais si vous essayez de faire simple superposition des données de chargement, je pense que votre approche n'est pas si grand. Imaginez une fonction que vous appelez et qui répond avec des données.

Après avoir récupéré des données, vous utiliserez probablement des promesses pour exposer les données à la portée. Avant d'appeler cette requête Ajax, vous devez placer une variable isLoading pour superposer div en utilisant ng-show = "isLoading" et la définir sur true, après avoir récupéré les données de promesse ou si elle a été rejetée, vous avez défini cette variable isLoading = false . Et la superposition s'affichera/cachera si la requête est en cours.

Si vous mettez plus de code sur un violon, je pourrais vous aider. De plus, vous n'utilisez pas correctement l'élément, pour utiliser .show() et .hide() sur l'élément, vous aurez besoin de jQuery.