0

I'm new to Angular JS and am trying to create a custom directive that creates img tags based on a list of urls and then performs some DOM manipulation afterward. I want to have the images fade in and out over time, like a slideshow. So far, I've got the images added to the DOM, but I can't find anywhere in the compile or link functions that allows me to manipulate the images, as the ng-repeat doesn't appear to have rendered yet. Any ideas?

The directive:

Logger.app.directive("ngSlideshow", function ($compile) {
    return {
        restrict: "A",
        templateUrl: "templates/slideshow.html",
        scope: {
            pictures: "=ngSlideshow"
        },
        link: {
            post: function(scope, element, attributes) {
                    var length = $(element).find("img").length; // 0
            }
        }
    };
});

The template:

<div class="spinner">
    <img src="{{picture}}" ng-repeat="picture in pictures" alt="" />
</div>

The view:

<div class="pictures" ng-slideshow="log.pictures"></div>

Thanks!
Chris

Chris Harrington
  • 1,593
  • 3
  • 17
  • 26
  • possible duplicate of [AngularJS: Linking to elements in a directive that uses ng-repeat](http://stackoverflow.com/questions/17643681/angularjs-linking-to-elements-in-a-directive-that-uses-ng-repeat) – JMansar Jul 16 '14 at 20:01
  • 1
    Also, I'd suggest you don't use ng prefix in your custom directives names. "Ng" prefix is reserved for the built-in directives and services defined by angularjs. – JMansar Jul 16 '14 at 20:12

0 Answers0