Как разрушить фиксированный заголовок после выхода из представления, FixedHeader отображается во всех представлениях сверху при прокрутке

Question

---

Я использую FixedHeader Extension Datatables. Я использую фиксированный заголовок сверху при прокрутке на веб-сайте, чтобы показать отчеты. Когда я меняю вид или проверяю другие страницы, заголовок отображается во всех видах при прокрутке. Я хочу уничтожить FixedHeader при изменении представления или проверить некоторые другие отчеты в том же представлении.

Когда я открываю любой отчет в первый раз, заголовок выглядит идеально

Заголовок, накладывающийся друг на друга при открытии другого отчета

Заголовок также отображается на других страницах (главная / о / детали)

Но когда я обновляю на любой странице / просмотре, это уходит. Я не знаю, может быть, это кеширование откуда-то.

sessionCache контроллеров отчетов - это объект. Прикрепил console.log (sessionCache)

Я хочу уничтожить / удалить / отключить / скрыть его после выхода из представления и повторно запустить его, если есть фиксированный заголовок.

Вот моя директива:

 angular.module('datatable.directive', [])
.directive('datatable', function ($compile) {
    return {
        scope: {
            dtData: '=',
            dtColumns: '=',
            dtSort: '=',
            dtDirection: '=',
            dtFilter: '=',
            dtPagination: '=',
            dtFixed: '='
        },
        transclude: true,
        controller: function($scope, $location) {
            $scope.navigateToListing = function(id) {
                $location.path('/seller/listing/management/' + id);
            };
        },
        link: function (scope, elem, attrs, ctrl) {
            var pagination = true;
            if( attrs.dtPagination == 'no' ) {
                pagination = false;
            }
            $.fn.dataTable.ext.errMode = 'throw';
            $(elem).dataTable({
                bFilter: true,
                data: scope.dtData,
                columns: scope.dtColumns,
                language: {
                    search: '',
                    searchPlaceholder: 'Search'
                },
                createdRow: function ( row, data, index ) {
                    // $(row).attr('ng-class', '{selected: selectedRow['+data.id+']}');
                    $compile(row)(scope.$parent);
                },
                initComplete: function() {
                    var thead = elem.find('thead tr');
                    var ix = 0;
                    var columns = this.api().init().columns;
                    this.api().columns().every( function () {
                        if(!columns[ix].uniqueFilter) {
                            ix++;
                            return;
                        }
                        var column = this;
                        var th = elem.find('thead tr th').eq(ix);
                        var title = columns[ix].sTitle;
                        var select = $('<select class="form-control input-sm"><option value="">' + title.toUpperCase() + '</option></select>');
                        select.on( 'change', function (ev) {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );
                        select.on('click', function(ev) {
                            ev.stopPropagation();
                        });
                        select.appendTo(th.empty());

                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' );
                        } );
                        ix++;
                    } );
                    if(scope.dtFilter) {
                        var table_id = $(this).attr('id');
                        $("#" + table_id + "_filter").appendTo("#" + scope.dtFilter);
                        $("#" + table_id + "_filter").find("input").first().removeClass("input-sm");
                    }
                },
                lengthChange: false,
                order: scope.dtSort == 'NONE' ? []: [[scope.dtSort || 0, scope.dtDirection || 'desc']],
                paging: pagination,
                fixedHeader: scope.dtFixed == true ? true : false

            });
        }
    };
});

Вот мой контроллер:

angular.module('reports.controller', [])
.controller('ReportsCtrl', ['API_URL', '$scope', '$route', '$location', 'SessionSvc', 'ReportSvc', '$analytics', 'CacheFactory', 'ngDialog', '$filter',
    function (API_URL, $scope, $route, $location, SessionSvc, ReportSvc, $analytics, CacheFactory, ngDialog, $filter) {

        $scope.API_URL = API_URL;
        $scope.state = {};
        $scope.state.dtFilterField = 'filter_target';
        $scope.loading = false;

        ReportSvc.getReports().then(function (resp) {
            var reports_var = resp.data.data;
        scope.reports = _.groupBy(reports_var, 'category');

        });

        $scope.getReport = function (rpt_key, rpt_name) {
            $scope.state.selectedReport = rpt_name;
            $scope.state.values = {};
            $scope.loading = true;
            $scope.error = "";
            ReportSvc.get(rpt_key).then(function (resp) {
                $scope.loading = false;
                $scope.state.reportName = resp.data.data.name;
                $scope.state.reportKey = resp.data.data.key;
                if( resp.data.data.error ) {
                    $scope.error = resp.data.data.error;
                }
                else {
                    $scope.state.reportDesc = resp.data.data.description;
                    $scope.state.colNames = resp.data.data.cols;
                    $scope.state.values = resp.data.data.values;
                    var colSpec = [];
                    _.each($scope.state.colNames, function (colName) {
                        var spec = {'title': colName.replace(/_/g, ' ')};
                        if (reportParams[rpt_key] && reportParams[rpt_key]['colSpec'][colName]) {
                            angular.extend(spec, reportParams[rpt_key]['colSpec'][colName])
                        }
                        colSpec.push(spec)

                    });
                    $scope.state.dtColumns = colSpec;
                }
            }, function(resp) {
                alert("Error running report.")
            });
        };

        reportParams['TEST'] = {
            'colSpec': {
                'company_name': {'uniqueFilter': true},
                'listing_id': {
                    'render': function (data, type, full, meta) {
                        return '<a ng-href="/listing_details/' + data + '">' + data + '</a>';
                    }
                }
            }
        };

        var sessionCache = CacheFactory.get('sessionCache');
        $scope.$on('$routeChangeStart', function (next, current) {
            sessionCache.put('reportContext', $scope.state)
        });
        if (sessionCache.get('reportContext')) {
            $scope.state = sessionCache.get('reportContext');
        }
    }]);

Вот мой HTML:

<div style="width:100%; padding-bottom: 15px;" ng-if="state.values.length > 0">
<table style="width:100%" class="table table-bordered" dt-fixed="true" dt-sort="'NONE'" dt-direction="desc" datatable dt-data="state.values" dt-filter="state.dtFilterField"
       dt-columns="state.dtColumns" dt-pagination="no">
</table>