CODEWITHSUNDEEP
javascriptangularjs
leseulsteve
leseulsteve

Reputation: 335

Angularjs show directive only when an image in his children is loaded

I have a list that has elements with images in it. I would love to show the elements only when there images have been fully loaded.

Here's what I have so far:

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

There is one image about 2-3 children down the DOM, the binding function work fine, but the '$scope.$apply('showItem = true');' part doesn't do anything...

Upvotes: 1

Views: 344

Answers (2)

Deblaton Jean-Philippe
Deblaton Jean-Philippe

Reputation: 11388

just do this :

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

In the link function, it is recommended that you use "scope" instead of $scope.

Upvotes: 1

Shripal Soni
Shripal Soni

Reputation: 2448

For ng-show interpolation is not required. You can try this

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

Upvotes: 3

Related Questions