内部 ng-repeat 完成后执行 Angular 自定义指令答案

【问题标题】：Angular custom directive execute after inner ng-repeat finished内部 ng-repeat 完成后执行 Angular 自定义指令
【发布时间】：2015-01-29 16:07:17
【问题描述】：

我的角度模板是：

<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>

我需要一个自定义指令“sticky-table”，它将在表格上应用一些 jquery。我的问题是指令执行时未填充表格元素的主体。我的指令代码是：

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

});

【问题讨论】：

查看这个现有的答案。指令的优先级stackoverflow.com/questions/19270392/…
实际上问题是如何使指令在内部 ng-repeat 之后执行，而不是之前。因此，在这种情况下，将优先级设置为高于 ng-repeat 没有任何作用。

标签： angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

请务必指定指令的优先级。 Ng-repeat 被设置为默认优先级 1000，因此您需要设置比该指令更高的优先级才能首先编译该指令。请看下面的例子：

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

您可以查看directive documentation了解更多详情。

【讨论】：