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

我必须在firebase动态加载的图像上应用微调器，我正在使用指令加载微调器，但其工作不正常微调器在图像加载时不显示

//为我们的应用程序创建模块
var-app=angular.module（“shoppingApp”，[]）；
应用程序指令（'加载'，函数（）{
返回{
限制：'E'，
替换：正确，
模板：“正在加载…”，
链接：功能（范围、元素、属性）{
范围$watch（'加载'），功能（val）{
if（val）
$（元素）.show（）；
其他的
$（元素）.hide（）；
});
}
}
})
//getProductData函数，用于获取产品列表，并在页面加载后初始调用
$scope.productArray=[]；	
$scope.getProductData=函数（回调、偏移、限制）{
//如果列表是从DB获取的，则显示加载程序的用户
$scope.load=true；firebase.database（）.ref（“sellerProduct”）。一次（'value'）。然后（函数（快照）{
var value=snapshot.val（）；
$scope.productArray=objToArray（值）；
//用于在收到响应时对数据进行屏蔽
$scope.loading=false；
});
}

---

这不需要整个指令。只需使用该div创建img元素，并将ng show=“loading”放在该元素上-给定您的代码，我认为它应该可以工作，因为您在承诺之前将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（.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) {

    }
  }

app.directive（'loading'，function（）{
返回{
限制：'E'，
替换：正确，
范围：{
正在加载：'='
},
模板：“正在加载…”，
链接：功能（范围、元素、属性）{
}
}

}))

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>

Sir它工作不正常，微调器不适用于图像，它将应用于整个页面？这里是实验小提琴：这是一个有点原始的示例，但您需要向我展示您的css以正确设置样式。现在它工作了，先生谢谢，先生请告诉m该指令内部如何工作？没有问题，当前范围（指令之一）正在通过双向绑定从其他作用域绑定“加载”，如果其中一个发生更改，另一个也会发生更改。如果前一个作用域上的loading属性等于true，则ng show将显示div，因为它们基本上是相同的值，它将像在同一作用域上一样工作。现在loading指令覆盖css，将position设置为absolute-over the element（将左和顶部值设置为0）然后设置正确的宽度和高度，z索引属性将使其覆盖。如果答案有用，您可以接受/向上投票，谢谢。谢谢先生，此信息对我非常有用。

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