Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.