javascript - 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 个 child 的图像，绑定(bind)函数工作正常，但是 '$scope.$apply('showItem = true');'部分不做任何事情......

Answer 1

不需要 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');
     });
   }