Angular custom directive execute after inner ng-repeat finished - angularjs

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);
});
}
}
});

Answer 1

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.