Angular custom directive execute after inner ng-repeat finished

Question

My angular template is:

<div style="min-width: 500px;">
                    <table sticky-table>
                        <thead>
                            <tr>
                                <th>Size</th>
                                <th>Vertical</th>
                                <th>Choker</th>
                                <th>Basket</th>
                                <th>Basket at 60</th>
                                <th>Basket at 45</th>
                                <th>Basket at 30</th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="row in getWireRopeSlingCapacityData(metricUnit)">
                            <tr>
                                <th>{{ row.size }}</th>
                                <td>{{ row.vertical }}</td>
                                <td>{{ row.choker }}</td>
                                <td>{{ row.basket }}</td>
                                <td>{{ row.basket_60 }}</td>
                                <td>{{ row.basket_45 }}</td>
                                <td>{{ row.basket_30 }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

I need a custom directive 'sticky-table' that will apply some jquery on the table. My issue is that the body of table element is not populated when directive executes. My directive code is:

app.directive("stickyTable", function($parse, $timeout) {
var stickyTable = function(element){
... aplly jquery code on table element
... table element inner html is: "
                        <thead>
                            <tr>
                                <th>Size</th>
                                <th>Vertical</th>
                                <th>Choker</th>
                                <th>Basket</th>
                                <th>Basket at 60</th>
                                <th>Basket at 45</th>
                                <th>Basket at 30</th>
                            </tr>
                        </thead>
                        <!-- ngRepeat: row in getWireRopeSlingCapacityData(metricUnit) -->
                    "

};
return {
    restrict: 'A',
    scope: true,
    link: function(scope, element, attrs) {
            var result = stickyTable(element);
            scope.$on('scroll1Position', function(event, position) {
                //console.log('Got scrolled to: ' + position.top + 'x' + position.left);
                if (!result)
                    return;
                result.repositionHead(position);
                result.repositionColumn(position);
            });
    }
}

});

see this existing answer re. priority of directives http://stackoverflow.com/questions/19270392/what-is-priority-of-ng-repeat-directive-can-you-change-it — ade jones, Jan 29 '15 at 16:13
Actually the question is how to make the directive execute after the inner ng-repeat, not before. So setting a priority higher than ng-repeat does nothing in this case. — Vexter, Apr 22 '15 at 11:34

score 0 · Answer 1 · answered Jan 29 '15 at 16:29

Be sure to specify the priority of your directive. Ng-repeat gets set to a default priority of 1000, so you need to set a higher priority than that for this directive to be compiled first. See the example below:

app.directive("stickyTable", function($parse, $timeout) {
...
return {
    prioriy: 1001
    restrict: 'A',
    scope: true,
    link: function(scope, element, attrs) {
            var result = stickyTable(element);
            scope.$on('scroll1Position', function(event, position) {
                //console.log('Got scrolled to: ' + position.top + 'x' + position.left);
                if (!result)
                    return;
                result.repositionHead(position);
                result.repositionColumn(position);
            });
    }
}});

You can view the directive documentation for more details.

Angular custom directive execute after inner ng-repeat finished

1 Answers1