Question

我必须对来自firebase的动态加载图像应用微调器，并且我使用指令来加载微调器但是它没有正常工作微调器没有显示在图像加载

＆＃13;

//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;
		});
	}

＆＃13;

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

＆＃13;

？

Answer 1

你不需要整个指令。只需使用该div创建img元素并输入ng-show =＆＃34; loading＆＃34;在该元素上 - 鉴于你的代码，我认为它应该有效，因为你在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 div）放入模板中。您不需要任何观察者，只需正确定位即可。

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>

如何在AngularJS中的Dynamiclly加载图像上应用加载微调器？

1 个答案: