AngularJSのDynamiclly読み込み画像に読み込みスピナーを適用するにはどうすればよいですか？

Question

私はfirebaseから動的にロードされた画像の上にスピナーを適用する必要があり、私はスピナーをロードするが、そのが正常にスピナーを動作していないためにディレクティブを使用していますが、画像のロード

//create the module for our application 
 
var app= angular.module("shoppingApp", []); 
 
app.directive('loading', function() { 
 
     return { 
 
     restrict: 'E', 
 
     replace:true, 
 
     template: '<div class="loading"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" />LOADING...</div>', 
 
     link: function (scope, element, attr) { 
 
      scope.$watch('loading', function (val) { 
 
       if (val) 
 
        $(element).show(); 
 
       else 
 
        $(element).hide(); 
 
      }); 
 
     } 
 
     } 
 
    }) 
 
    
 
//getProductData FUNCTION FOR GET THE LIST OF THE PRODUCRS AND CALL INTIALLY AFTER PAGE LOAD 
 
\t $scope.productArray = []; \t 
 
\t $scope.getProductData = function(callback, offset, limit) { 
 
\t \t //USER FOR SHOW THE LOADER IF LIST IS GET FROM DB 
 
\t \t $scope.loading = true; \t firebase.database().ref("sellerProduct").once('value').then(function(snapshot) { 
 
\t \t var value = snapshot.val(); 
 
\t \t \t $scope.productArray = objToArray(value); 
 
\t \t 
 
\t \t \t //USED FOR DIABLE THE LAODER IF RESPONSE IS RECEIVED 
 
\t \t \t $scope.loading = false; 
 
\t \t }); 
 
\t }

<div class="hover-div" ng-right-click> 
 
<loading> 
 
    <img id="myImage" ondragstart="return false;" 
 
    class="imageSet" src="{{list.ImageURL}}" width="100%"> 
 
    </loading> 
 
</div>

に表示できません

？

Answer 1

あなたはこれのための全体の指示を必要としません。そのdivでおそらくそのimg要素を作成し、その要素にng-show = "loading"を設定します。あなたのコードでは、私はそれがうまくいくと思います。 HTML：

<div class="hover-div" ng-right-click> 
    <img id="myImage" ondragstart="return false;" class="imageSet" src="{{list.ImageURL}}" width="100%"> 
    <div ng-show="loading" class="loading" /> 
     <img src="https://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" />LOADING... 
    </div> 
</div> 

してからちょうどのようなもののCSSを使用：あなたは本当にディレクティブをしたい場合は

.loading { 
    background-color: black; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
    z-index: 999; 
} 

はまた、（.hover-DIV）あなたの親要素のCSSにもよるが

を動作しない可能性がありますスコープにローディングバインドを入れ、ちょうど私のコードを置く（.loading di v）をテンプレートに追加します。ウォッチャーを必要とせず、適切に配置するだけです。

app.directive('loading', function() { 
    return { 
    restrict: 'E', 
    replace:true, 
    scope:{ 
     loading: '=' 
    }, 
    template: '<div ng-show="loading" class="loading"><img src="https://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" />LOADING...</div>', 
    link: function (scope, element, attr) { 

    } 
    } 

}）;

とhtmlうわー、今、このディレクティブの初期化が混乱に見えますが、動作するはずです：

<div class="hover-div" ng-right-click> 
     <img id="myImage" ondragstart="return false;" class="imageSet" src="{{list.ImageURL}}" width="100%"> 
     <loading loading='loading'> 
    </div>