angularjs - 修复了当我们在单页应用程序中导航到不同页面时显示的标题

Question

我将 Datatables 与 AngularJS 和 FixedHeader 插件一起使用，当表格显示在页面上时，它工作正常。我的问题是，当我使用 Angular UI 路由器导航到不同的页面(单页应用程序)时，FixedHeader 标题仍然显示。

有谁知道为什么会这样？

Answer 1

看起来这是 FixedHeader 的问题。插件到 DataTables .

https://l-lin.github.io/angular-datatables/#/welcome 有一个 angular-DataTables 模块，其中有一个关于使用它的插件的页面。此页面列出了 FixedHeader 插件并提到了您看到的相同问题。

见 https://l-lin.github.io/angular-datatables/#/withFixedHeader .

该页面内容如下:

Beware when using routers. It seems that the header and footer stay in your DOM even when you change your application state. So you will need to tweak your code to remove them when exiting the state.

它还显示了 angular-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();
  }
});