AngularJS中的Tablesaw

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将扫描树并在具有正确tablesaw标记的所有子元素上启用自身。您可以在$document上调用它，也可以在某种预定义的父元素上调用它。