如何在AngularJS中对动态加载的图像应用加载微调器？

Question

我必须在一个动态加载的图像上应用微调器，我正在使用指令来加载微调器，但它不能正常工作，微调器在图像加载时不显示。

​

//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
	$scope.productArray   = [];	
	$scope.getProductData = function(callback, offset, limit) {
		//USER FOR SHOW THE LOADER IF LIST IS GET FROM DB
		$scope.loading = true;	firebase.database().ref("sellerProduct").once('value').then(function(snapshot) {
		var value = snapshot.val();
			$scope.productArray = objToArray(value);
		
			//USED FOR DIABLE THE LAODER IF RESPONSE IS RECEIVED
			$scope.loading = false;
		});
	}

<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“放在该元素上-给定您代码，我认为它应该可以工作，因为您在promise之前将loading设置为true，之后将其设置为false，因此您的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;
}

根据父元素css (.hover-div)的不同，可能无法正常工作

同样，如果你真的想要指令加载绑定，只需要把我的代码(.loading目录)放到你的模板中。你不需要任何观察者，它会工作的，只要正确地定位它即可。

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>