Add additional doc on fixedHeader plugin

l-lin · l-lin · commit b33bc8c8ca2c · 2015-01-23T23:09:00.000+01:00
diff --git a/demo/app.js b/demo/app.js
@@ -84,7 +84,8 @@ function routerConfig($stateProvider, $urlRouterProvider, USAGES) {
                     templateUrl: 'demo/' + key + '/' + usage.name + '.html',
                     controller: function($rootScope) {
                         $rootScope.$broadcast('event:changeView', usage.name);
-                    }
+                    },
+                    onExit: usage.onExit
                 });
             });
         });
diff --git a/demo/usages.js b/demo/usages.js
@@ -89,6 +89,12 @@ angular.module('showcase.usages', ['ngResource'])
         label: 'With Fixed Columns'
     }, {
         name: 'withFixedHeader',
-        label: 'With Fixed Header'
+        label: 'With Fixed Header',
+        onExit: function() {
+            var fixedHeaderEle = document.getElementsByClassName('fixedHeader');
+            angular.element(fixedHeaderEle).remove();
+            var fixedFooterEle = document.getElementsByClassName('fixedFooter');
+            angular.element(fixedFooterEle).remove();
+        }
     }]
 });
diff --git a/demo/withPlugins/withFixedHeader.html b/demo/withPlugins/withFixedHeader.html
@@ -12,6 +12,36 @@ <h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatab
         <p>
             You also need to add the dependency <code>datatables.fixedheader</code> to your Angular app.
         </p>
+        <div class="api alert alert-danger">
+            <p>
+                <i class="fa fa-warning"></i>&nbsp;Beware when using routers. It seems that the header and the footer stay
+                in your DOM even when you change your application state. So you will need to tweek your code to remove them
+                when exiting the state.
+            </p>
+            <p>
+                For example, if you are using <a href="https://github.com/angular-ui/ui-router">Angular ui-router</a>, you can
+                add an <code>onExit</code> callback like this:
+            </p>
+            <br />
+<div hljs>
+$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();
+    }
+});
+</div>
+        </div>
     </section>
     <section class="showcase">
         <div ng-controller="WithFixedHeaderCtrl as showCase">
