AngularJS: Linking to elements in a directive that uses ng-repeat

Question

I have a simple directive where the template uses ng-repeat inside it. I need to run some code to instantiate a jquery component against some of the elements created by the

Answer 1

I found that if created another directive that I added to the element where the ng-repeat was being created it would be notified for each element the repeat created. Then I could simply $emit an event that the parent directive could listen for. At which point it could perform the linking to the repeated elements there. This worked quite nicely especially for multiple ng-repeats within the dom because I could separate them by their event type which would be passed to the new directive.

Here is my directive:

App.directive("onRepeatDone", function() {
    return {
        restrict: 'A',
        link: function($scope, element, attributes ) {
            $scope.$emit(attributes["onRepeatDone"] || "repeat_done", element);
        }
    }
});

Here is the usage of that new directive in the template:

    
...

Then inside the parent directive I could do the following:

link: function( $scope, element, attributes ) {
    $scope.$on('domain_done', function( domainElement ) {
        domainElement.find('.someElementInsideARepeatedElement').click(...);
    } );
}