Angular Directive: Access images generated with ng-repeat from parent directive once all have loaded
<div> | |
<div ng-repeat="image in images" style="display: inline;"> | |
<img image-directive-item ng-src="{{image.url}}" data-index="{{$index}}" /> | |
</div> | |
</div> |
angular.module("myApp") | |
.directive("imageDirective", function() { | |
return { | |
scope: { images: '=images'}, | |
controller: function($scope){ | |
var toBeLoaded = $scope.images.length; | |
this.childLoaded = function(index, childElement) { | |
$scope.images[index].elem = childElement; | |
if(--toBeLoaded == 0) { | |
allChildrenLoaded(); | |
} | |
}; | |
function allChildrenLoaded() { | |
console.log("All children loaded."); | |
console.log($scope.images[0].elem); | |
} | |
}, | |
templateUrl: _contextPath + 'imageDirective.html' | |
}; | |
}) | |
.directive("imageDirectiveItem", function() { | |
return { | |
require: "^imageDirective", | |
link: function(scope, element, attrs, imageDirectiveCtrl) { | |
element.bind("load", function() { | |
var elem = this; | |
var index = parseInt(this.attributes["data-index"].value); | |
scope.$apply(function() { | |
imageDirectiveCtrl.childLoaded(index, elem); | |
}); | |
}); | |
} | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment