Javascript Angularjs仅在加载其子对象中的图像时显示指令

我有一个列表，其中包含带有图像的元素。我想只在图像已完全加载时才显示元素

以下是我目前掌握的情况：

 .directive...
   template: '<md-item ng-show="{{showItem}}" ng-transclude></md-item>',
   link: function($scope, iElm, iAttrs, controller) {
     $scope.showItem = false;
     iElm.find('img').bind('load' , function(e) {
       $scope.$apply('showItem = true');
     });
   }

DOM中有一个关于2-3个子对象的图像，绑定函数工作正常，但是“$scope.$apply”showItem=true”；”零件没有任何作用…

只需执行以下操作：

.directive...
 template: '<md-item ng-show="showItem" ng-transclude></md-item>',
 link: function(scope, iElm, iAttrs, controller) {
   scope.showItem = false;
   iElm.find('img').bind('load' , function(e) {
     scope.showItem = true;
   });
 }

在链接功能中，建议您使用scope而不是$scope。

只需执行以下操作：

.directive...
 template: '<md-item ng-show="showItem" ng-transclude></md-item>',
 link: function(scope, iElm, iAttrs, controller) {
   scope.showItem = false;
   iElm.find('img').bind('load' , function(e) {
     scope.showItem = true;
   });
 }

---

在链接功能中，建议您使用scope而不是$scope。

对于ng，不需要显示插值。你可以试试这个

.directive...
   template: '<md-item ng-show="showItem" ng-transclude></md-item>',
   link: function($scope, iElm, iAttrs, controller) {
     $scope.showItem = false;
     iElm.find('img').bind('load' , function(e) {
       $scope.$apply('showItem = true');
     });
   }

---

对于ng show，不需要插值。你可以试试这个

.directive...
   template: '<md-item ng-show="showItem" ng-transclude></md-item>',
   link: function($scope, iElm, iAttrs, controller) {
     $scope.showItem = false;
     iElm.find('img').bind('load' , function(e) {
       $scope.$apply('showItem = true');
     });
   }