Angularjs只在加载其子女中的图像时才显示指令。

Question

我有一个包含图像元素的列表。我想显示的元素，只有当那里的图像已经完全加载。

到目前为止，我的情况如下：

 .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');‘部件什么都不做.

Answer 1

对于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');
     });
   }

Answer 2

就这么做吧：

.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。