Question

我的角度模板是：

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

}）;

Answer 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了解详情。

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

1 个答案: