Исправлен плагин заголовка, не работающий в Angular datatables

Question

Я использую стабильную версию сборки стабильной версии v2.1.2 плагина jquery с фиксированным заголовком. Я пытаюсь исправить заголовок таблицы. Я создал таблицу, используя угловые таблицы данных, как упомянуто здесь.

В моем классе контроллера я написал следующий код,

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>

Однако, когда я запускаю свое приложение, я получаю следующую ошибку,

Ошибка типа: невозможно прочитать свойство 'childNodes' из неопределенного

Я также попытался использовать следующую директиву, так как я знаю, что манипуляции DOM не должны выполняться в контроллере, но я получаю следующую ошибку.

TypeError: Невозможно установить свойство '_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); 
        }
    };
});

Пожалуйста, кто-нибудь может предложить лучшее решение?

Я использую версию 2.1.2 файла dataTables.fixedHeader.js, и моя ошибка указана ниже

 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угловые-datatables.fixedheader.min.jsto your HTML. You also need to add the dependencydatatables.fixedheader` в ваше угловое приложение. тогда ваш код будет выглядеть ниже.

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);

Вы также можете переместить этот код в директиву, только вам нужно удалить столбец заголовка, который добавляется как дополнительный заголовок.

Я ссылался на эту ссылку для выше обновленного решения

Рабочий планкр