ngTable 无法生成标题

Question

我正在使用带有此代码的 ngTable：

HTML：

 <table data-ng-table="tableParams" class="table table-condensed table-bordered table-striped">
                        <tbody>
                            <tr data-ng-repeat="task in $data">
                                <td data-title="''">
                                    <input type="checkbox" style="display: block; margin: auto;" ng-model="task.IsSelected" ng-change="optionToggled()">
                                </td>
                                <td data-title="''" style="text-align: center">
                                    <i class="glyphicon glyphicon-flag" ng-show="task.IsToday"></i>
                                    <i class="glyphicon glyphicon-ok" ng-show="task.IsCompleted"></i>
                                </td>
                                <td data-title="'Subject'" data-sortable="'Subject'">{{task.Subject}}</td>
                                <td data-title="'Priority'" data-sortable="'PriorityValue'">{{task.PriorityValue}}</td>
                                <td data-title="'Status'" data-sortable="'StatusValue'">{{task.StatusValue}}</td>
                                <td data-title="'Due Date'" data-sortable="'DueDate'">{{task.DueDate}}</td>
                                <td data-title="'Completed'" data-sortable="'CompletedValue'">{{task.CompletedValue}}</td>
                                <td data-title="'Date Completed'" data-sortable="'DateCompleted'">{{task.DateCompleted}}</td>
                                <td data-title="'Action'">
                                    <button type="button" style="display: block; margin: auto;" class="btn btn-info btn-xs" ng-click="editRow(task)">
                                        <i class="glyphicon glyphicon-edit"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

Javascript：

 $scope.tableData = [];

    $scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 10, // count per page
        sorting: { DueDate: "asc" } // initial sort order,
    },
    {
        paginationMaxBlocks: 10,
        paginationMinBlocks: 2,

        getData: function($defer, params) {

            var sorting = params.sorting();
            var keySorting = Object.keys(sorting)[0];
            var valueSorting = sorting[keySorting];

            var count = params.count();
            var pageIndex = params.page() - 1;
            var keySearch = angular.isDefined($scope.textSearch) ? $scope.textSearch : '';

            taskService.pagingTasks(pageIndex * count, count, keySearch, keySorting, valueSorting).then(function(data) {
                var obj = angular.fromJson(data);
                params.total(obj.Total);

                formatToDateTime(obj.Data);

                $scope.tableData = obj.Data;
                $defer.resolve(obj.Data);
            });
        }
    });

但是当我运行我的网站时，我看到 ngTable generate

我的浏览器控制台显示此错误：

我不知道为什么 ngTable 不能生成列标题。 目前，我必须手动创建列标题。

Answer 1

我找到了答案：

您可以根据这篇文章解决此问题： AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template

修改文件“ng-table.js”中的这些行并删除 tr 标签：“filterRow.html”、“groupRow.html”、“sorterRow.html”。

（模板）

$templateCache.put('ng-table/header.html', '<tr ng-if="params.hasGroup()" ng-show="$groupRow.show" class="ng-table-group-header" ng-table-group-row></tr> <tr class="ng-table-sort-header headerrow" ng-table-sorter-row></tr> <tr ng-show="show_filter" class="ng-table-filters" ng-table-filter-row></tr> ');

（指令）

function ngTableGroupRow(){
        var directive = {
            restrict: 'A',
            //replace: true,
            templateUrl: 'ng-table/groupRow.html',
            scope: true,
            controller: 'ngTableGroupRowController',
            controllerAs: 'dctrl'
        };
        return directive;
    }

function ngTableSorterRow(){
        var directive = {
            restrict: 'A',
            //replace: true,
            templateUrl: 'ng-table/sorterRow.html',
            scope: true,
            controller: 'ngTableSorterRowController'
        };
        return directive;
    }

 function ngTableFilterRow(){
        var directive = {
            restrict: 'A',
            //replace: true,
            templateUrl: 'ng-table/filterRow.html',
            scope: true,
            controller: 'ngTableFilterRowController'
        };
        return directive;
    }