javascript - AngularJS 中的表锯

Question

我一直在尝试在 angularJS 中使用 filamentgroup 的 tablesaw ( https://github.com/filamentgroup/tablesaw )(我真的很喜欢这个功能填充的表格)，但我不知道如何开始。许多文章似乎都指向使用 AngularJS 的指令将现有的 JQuery 插件转换为 Angular 的指令。这是否意味着对于我从 Tablesaw 使用的每个 JQuery 标记，我都必须将整个 JQuery 函数从 Tablesaw 重写到 Angular？

了解 Angular 希望我们避免从 JQuery 进行 DOM 操作，并重新考虑我们如何开发我们的应用程序。然而，放弃数百个在线可用的做得很好的 JQuery 库并浪费时间和精力重写库以按照 Angular 想要的方式工作是没有意义的。

非常感谢任何人让我开始使用 JQuery TableSaw 和 Angular。提前致谢!

Answer 1

我让 tablesaw 为一个表工作，其中的行由 ng-repeat 使用以下指令生成:

app.directive("tableSaw", ['$timeout', function ($timeout) {
        return {
            restrict: 'A',
            link: function($scope, element, attr) {
                if($scope.$last === true) {
                    $timeout(function () {
                        $(document).trigger("enhance.tablesaw");
                    });
                }

            } // end link
        };
    }]);

关键是对 tablesaw 的调用仅在整个表格已呈现后才有效，这就是我按行应用指令的原因，因此它只能在最后一行已呈现后启动 tablesaw。

这是我的表格(请注意与 ngRepeat 一起应用的 table-saw 指令):

<div id="myContainer" ng-controller="AdminUserListCtrl as vm">
    <table id="myTable"
       class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
        <thead class='study-list-header'>
            <tr>
                <th scope="col" data-tablesaw-sortable-col>
                    Name
                </th>
                <th scope="col" data-tablesaw-sortable-col>
                    Email
                </th>
            </tr>
        </thead>

        <tbody id="studyListData">
            <tr class="study-list-row"
                ng-repeat="elem in vm.usersList"
                table-saw>
               <td>{{elem.last_name}}, {{elem.first_name}}</td>
               <td>
                   {{elem.email}}
               </td>
            </tr>
        </tbody>
    </table>
</div>

我的包括:

require('jquery');
require('../../node_modules/tablesaw/dist/tablesaw.css');
require('../../node_modules/tablesaw/dist/tablesaw.jquery.js');

我不包括 tablesaw-init.js(它会导致错误，并且在他们的文档中指定的手动初始化的情况下应该不存在)。

关于调用 $(document) 的说明。 tablesaw git 页面中的文档指定要在元素上手动初始化 tablesaw，我们应该在任何父元素上调用 trigger("enhance.tablesaw")，tablesaw 将扫描树并在所有元素上启用自身具有正确表格标记的子元素。如果您想在 $document 或某种预定义的父元素上调用它，则由您决定。