StackOverflow_19479599: access-to-ng-included-dom-nodes

Illustration of answer to http://stackoverflow.com/questions/19479599/access-to-ng-included-dom-nodes.

by ExpertSystem

HTML

<script src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<div ng-controller="myCtrl">
    <div class="col-md-5 js-column" ng-repeat="orm in orms" repeat-done="equalHeight">
        <h2>{{ orm.name }}</h2>
        <ng-include src="'/inc/_compiled/'+orm.id+'.html'"></ng-include>
    </div>
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.orms = [
        {id: 1, name: 'ORM 1'},
        {id: 2, name: 'ORM 2'},
        {id: 3, name: 'ORM 3'},
        {id: 4, name: 'ORM 4'},
        {id: 5, name: 'ORM 5'}
    ];
});

app.directive('repeatDone', function ($timeout) {
    return {
        restrict: 'A',
        link: function postLink(scope, elem, attrs) {
            if (scope.$last) {
                $timeout(function () {
                    console.log('In timeout:', elem[0].querySelectorAll('h4'));
                });

                function evalAsync (idx) {
                    var content = elem[0].querySelectorAll('h4');
                    console.log('In evalAsync ' + idx + ':', content);
                    if (content.length === 0) {
                        scope.$evalAsync(evalAsync.bind(null, idx + 1));
                    }
                }

                scope.$evalAsync(evalAsync.bind(null, 1));
            }
        }
    };
});

app.run(function ($templateCache) {
    function createTmpl(id) {
        var tmpl = '<h4>This is the template for ORM ' + id + '</h4><hr />';
        return tmpl;
    }
    for (var i = 1; i <= 5; i++) {
        $templateCache.put('/inc/_compiled/' + i + '.html',
                           createTmpl(i));
    }
});