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

我得到了一个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
        };
    }]);

调用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或某种预定义的父元素上调用它，则取决于您。

在AngularJS中的Tablesaw

1 个答案: