修复头插件在Angular数据表中不起作用

Question

我正在使用固定标头jquery 插件的稳定版本稳定版本v2.1.2。 我正在尝试修复我的表头。 我创建了采用了棱角分明的DataTable提到在桌子上这里 。

在我的控制器类中，我编写了以下代码，

app.controller("SampleController", function ($scope) {

    $(document).ready( function () {
        var table = $('#example').DataTable();
        new $.fn.dataTable.FixedHeader( table );
    });

});

我的HTML如下，

 <table id="example" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" fix-header>
              <thead>
                <tr>
                    <th>Name </th>
                </tr>
               </thead>    
              <tbody> 
                   <tr ng-repeat="item in items">
                        <td>{{item.name}} </td>
                   </tr>
              </tbody>
 </table>

但是当我运行我的应用程序时，我收到以下错误，

TypeError：无法读取未定义的属性“childNodes”

我也尝试使用以下指令，因为我知道DOM操作不应该在Controller中完成，但我得到以下错误。

TypeError：无法设置undefined的属性'_oPluginFixedHeader'

更新：

我的指示

app.directive('fixHeader', function () {
    return {
        restrict: 'AE', //attribute or element
        replace: true,
        link: function ($scope, elem, attr) {
            $scope.table = elem.find("#example");  
            console.log($scope.table);
            var table= $scope.table.dataTable(); 
            new $.fn.dataTable.FixedHeader(table); 
        }
    };
});

请有人建议更好的解决方案吗？

我使用的是dataTables.fixedHeader.js的 2.1.2版，我的错误来自下面一行

 var dt = $.fn.dataTable.Api ?
        new $.fn.dataTable.Api( mTable ).settings()[0] :
        mTable.fnSettings();

    dt._oPluginFixedHeader = this; //error over here

Answer 1

angular-datatables还为FixedHeader works with datatables. You need to add the files提供了与数据FixedHeader works with datatables. You need to add the files插件FixedHeader works with datatables. You need to add the files FixedHeader works with datatables. You need to add the files angular-datatables.fixedheader.min.js FixedHeader works with datatables. You need to add the files to your HTML. You also need to add the dependency to your HTML. You also need to add the dependency datatables.fixedheader` to your HTML. You also need to add the dependency到Angular应用程序中。 那么你的代码将如下所示。

HTML

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border">
    <thead>
        <tr>
            <th>Name </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in items">
            <td>{{item.name}} </td>
        </tr>
    </tbody>
</table>

码

var app = angular.module('app', ['datatables', 'datatables.fixedheader'])
app.controller("SampleController", function($scope, DTOptionsBuilder, DTColumnBuilder) {
    $scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
        .withPaginationType('full_numbers')
        .withDisplayLength(25)
        .withFixedHeader({
            bottom: true
        });
    $scope.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('Name').withTitle('Name'),
        DTColumnBuilder.newColumn('Address').withTitle('Address')
    ];
});

无需添加指令，因为在angular-datatables.fixedheader.min.js已经创建了指令（ 参考链接 ）

更新：

以下更改需要在代码中完成。

1. 将FixedHeader js代码和jquery代码替换为new $.fn.dataTable.FixedHeader($element.find('#example'))
2. 调用将设置FixedHeader方法

调节器

(function(angular) {
    angular.module('showcase.angularWay', ['datatables'])
    .controller('AngularWayCtrl', AngularWayCtrl);

    function AngularWayCtrl($http, $element) {
        var vm = this;
        $http.get('data.json').then(function(res) {
            vm.persons = res.data;
            vm.setFixedHeader(); //call method to set glass.
        });

        vm.setFixedHeader = function(){
            //var table = $element.find('#example').DataTable();
            new $.fn.dataTable.FixedHeader($element.find('#example'))
        };
    }
})(angular);

您也可以将此代码移动到指令，只需要删除作为额外标头附加的标题列。

我将此链接引用为上述更新的解决方案

工作Plunkr