如何为ng-table创建自定义指令（对表和ng-repeat使用不同的数据）

debugcn 发表于 Dev

加布里埃拉

我有点想为ng-table创建自定义指令。在我的应用程序中，我多次使用“用户”表。我有一个显示所有用户的主表，也有一些显示有限数量的用户的自定义表。这些用于表的自定义数据将创建到控制器中，并具有不同的名称（usersList1，usersList2等）。

这些表是相同的（标题，列标签），仅内部数据发生更改。

我想要一个自定义指令，并将要显示的数据传递给它。

这是我的代码：

.directive('tableForListingDirective', function () {
        return {
            restrict: 'EA',
            scope: true,
            template: [

                '<table ng-table="tableParams" class="table table-striped table-bordered table-hover" template-pagination="custom/pager">',
                '<tr ng-repeat="user in tableData">',
                '<td width="30" style="text-align: left" header="\'ng-table/headers/checkbox.html\'"> <input type="checkbox" ng-model="user.checked" ng-change="toggleCheckedUserToAdd(user)"/>',
                '<td data-title="\'Status\'" sortable="\'status\'">{{user.status}}</td>',
                '<td data-title="\'Login\'" sortable="\'login\'">{{user.login}}</td>',
                '<td data-title="\'Name\'" sortable="\'name\'">{{user.name}}</td>',
                '<td data-title="\'Email\'" sortable="\'email\'">{{user.email}}</td>',
                '</tr>',
                '</table>'
            ].join(''),
            link: function (scope, element, attrs) {
                scope.tableData=scope.$eval(attrs.tableData);
            },
        }
    });

调用html文件：

<table-for-listing-directive table-data="{{users}}"></table-for-listing-directive>

您可能会说，为什么不把tableData：“ =”放到作用域中。好了，经过长时间的搜索，我发现ng-repeat和scope {}不想互相配合，因此为了使ng-repeat在指令中起作用，我必须说“ scope：true” 。

在ng-repeat内部，我试图使其ng-repeat="user in {{tableData}}"也不起作用。

博格丹·迪努（Bogdan Dinu）

在您的HTML更改table-data="{{users}}"中table-data="users"

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-9

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章