javascript - AngularJS中的Tablesaw

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

了解到Angular希望我们避免JQuery中的DOM操作，并重新考虑我们如何开发应用程序。但是，放弃数百个在线上可用的精良JQuery库并没有意义，只是浪费时间和精力来重写库以按Angular的方式工作。

非常感谢任何人使用JQuery TableSaw和Angular启动我。提前致谢!

最佳答案

我使用了tableaw来处理由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
        };
    }]);

关键是对tableaw的调用仅在呈现完整表后才起作用，这就是为什么我逐行应用指令的原因，因此它只能在呈现最后一行后才启动tableaw。

这是我的表(请注意，与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');

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

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

关于javascript - AngularJS中的Tablesaw，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30905227/