Fixed Header zeigt an, wenn wir zu einer anderen Seite in einer einzelnen Anwendung navigieren

Question

Ich verwende Datatables mit AngularJS und dem FixedHeader-Plugin, das funktioniert, wenn die Tabelle auf der Seite angezeigt wird. Mein Problem ist, dass der FixedHeader-Header immer noch angezeigt wird, wenn ich mit einem eckigen UI-Router zu einer anderen Seite (einseitige Anwendung) navigiere.

Weiß jemand, warum das der Fall ist?

Answer 1

Es sieht aus wie ein Problem mit dem FixedHeader Plugin zu DataTables.

Es gibt ein angular-DataTables-Modul unter https://l-lin.github.io/angular-datatables/#/welcome, das eine Seite über die Plugins hat, die damit arbeiten. Diese Seite listet das FixedHeader-Plugin auf und erwähnt dasselbe Problem, das Sie sehen.

Siehe .

Diese Seite sagt der folgende:

Vorsicht beim Router verwenden. Es scheint, dass die Kopf- und Fußzeile in Ihr DOM bleiben, auch wenn Sie Ihren Anwendungsstatus ändern. Sie benötigen also , um Ihren Code zu optimieren, um sie beim Beenden des Status zu entfernen.

Es zeigt auch eine Abhilfe für Winkel-ui-Router:

$stateProvider.state("contacts", { 
    templateUrl: 'somewhereInDaSpace', 
    controller: function($scope, title){ 
    // Do your stuff 
    }, 
    onEnter: function(title){ 
    // Do your stuff 
    }, 
    onExit: function(){ 
    // Remove the DataTables FixedHeader plugin's headers and footers 
    var fixedHeaderEle = document.getElementsByClassName('fixedHeader'); 
    angular.element(fixedHeaderEle).remove(); 
    var fixedFooterEle = document.getElementsByClassName('fixedFooter'); 
    angular.element(fixedFooterEle).remove(); 
    } 
});