Access compiled ng-repeat children elements in link function of a custom directive

Question

I want to get ng-repeat children elements of a parent container in my custom directive's link function. I expect element parameter passed in link function should do the job. Something like this

element.children() // gets all children elements

instead I've got text node <!-- ngRepeat: course in courses -->

This is my directive element:

<course-list courses="courses"></course-list>

and here is the directive implementation

angular.module('pgCoursesList', [])
.directive('coursesList', [
    function() {
        return {
            restrict: 'E', 
            scope: {
                courses: '=',
                buttonText: '@'
            },
            template: '<div class="courseslist-container">' +
                    '<div ng-repeat="course in courses" class="media">' +
                        '<div class="media-left"><a class="img-thumb-64 blank-thumb-img" href="#">64x64</a></div>' +
                        '<div class="media-body clearfix">' +
                            '<h4 class="media-heading pull-left">{{course.name}}</h4>' +
                        '</div>' +
                        '<div class="media-left"><button btn-style="btn-success"></button></div>' +
                        '<hr />' +
                    '</div>' +
                '</div>',
            replace: true,
            link: function(scope, elem) {
                // elem.children()   
            }
        };
    }
]);

Answer 1

It is some sort of hack but you can do it using ng-init. We can track last element is rendered on DOM or not by checking $last inside ng-repeat. Only you need to add ng-init="$last && domRendered()" inside ng-repeat div.

Code changes

template: '<div class="courseslist-container">' +
 '<div ng-repeat="course in courses" class="media">' +
 '<div class="media-left"><a class="img-thumb-64 blank-thumb-img" href="#" ng-init="$last && domRendered()">64x64</a></div>' +
  '<div class="media-body clearfix">' +
   '<h4 class="media-heading pull-left">{{course.name}}</h4>' +
  '</div>' +
  '<div class="media-left"><button btn-style="btn-success"></button></div>' +
  '<hr />' +
 '</div>' +
'</div>',
link: function(scope, element){
  scope.domRendered = function(){
     element.children(); //you can get element children here
  };
 }

Or more better way you can try this link. for that you need to add one more directive.

Hope this could help you. Thanks.