ディレクティブリンク関数

Question

ディレクティブを使用してajaxローダーを作成したいとします。リンク機能では、私はショーと非表示機能を使用しますが、私はエラー

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のjqLit​​eにはshow()またはhide()の機能はありません。

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

私は間違っているかもしれませんが、データを読み込む際に単純なオーバーレイを実行しようとしている場合、あなたのアプローチはそれほど大きくないと思います。

あなたが呼び出す関数を想像し、データで応答します。データを取得した後、おそらく約束を使ってデータをスコープに公開します。そのAjaxリクエストを呼び出す前に、ng-show = "isLoading"を使っていくつかの変数isLoadingをオーバーレイdivに配置し、それをtrueに設定します。プロミスからデータを取得した後、またはその変数を拒否するとisLoading = false 。要求が進行中の場合、オーバーレイは表示/非表示になります。

私はあなたを助けることができるいくつかのフィドルに多くのコードを置く場合。また、jQueryを必要とする要素に対して.show（）および.hide（）を使用するには、要素を正しく使用していません。