Add dt prefix + Add doc #144

Author: l-lin

demo/advanced/disableDeepWatchers.html

@@ -0,0 +1,72 @@
+<article class="main-content">
+    <header class="article-header">
+        <h1><i class="fa fa-play"></i>&nbsp;Disabling deep watchers</h1>
+    </header>
+    <section class="article-content">
+        <p>
+            The <code>angular-datatables</code> uses deep search for changes on every <code>$digest</code> cycle.
+            Meaning every time any Angular event happens (ng-clicks, etc.), the entire array, each of it's children, it's children's children, and so forth gets compared to a cached copy.
+        </p>
+        <p>
+            There is an attribute to add so that if the directive has a truthy value for <code>dt-disable-deep-watchers</code> at compile time then it will use <code>$watchCollection(...)</code> instead.
+            This would allow users to prevent big datasets from thrashing Angular's <code>$digest</code> cycle at their own discretion
+        </p>
+    </section>
+    <section class="showcase" ng-controller="withAjaxCtrl">
+        <tabset>
+            <tab heading="Preview">
+                <article class="preview">
+                    <div>
+                        <table datatable dt-options="dtOptions" dt-columns="dtColumns" dt-disable-deep-watchers="true" class="row-border hover"></table>
+                    </div>
+                </article>
+            </tab>
+            <tab heading="HTML">
+<div hljs>
+<div ng-controller="withAjaxCtrl">
+    <table datatable dt-options="dtOptions" dt-columns="dtColumns" dt-disable-deep-watchers="true" class="row-border hover"></table>
+</div>
+</div>
+            </tab>
+            <tab heading="JS">
+<div hljs language="js">
+angular.module('datatablesSampleApp', ['datatables']).controller('withAjaxCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
+    $scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
+        .withPaginationType('full_numbers');
+    $scope.dtColumns = [
+        DTColumnBuilder.newColumn('id').withTitle('ID'),
+        DTColumnBuilder.newColumn('firstName').withTitle('First name'),
+        DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
+    ];
+});
+</div>
+            </tab>
+            <tab heading="Example data">
+                <p class="example-data">
+                    <a target="_blank" href="/angular-datatables/data.json" tooltip="data.json">data.json&nbsp;<i class="fa fa-external-link"></i></a>
+                </p>
+<div hljs language="json">
+[{
+    "id": 860,
+    "firstName": "Superman",
+    "lastName": "Yoda"
+}, {
+    "id": 870,
+    "firstName": "Foo",
+    "lastName": "Whateveryournameis"
+}, {
+    "id": 590,
+    "firstName": "Toto",
+    "lastName": "Titi"
+}, {
+    "id": 803,
+    "firstName": "Luke",
+    "lastName": "Kyle"
+},
+...
+]
+</div>
+            </tab>
+        </tabset>
+    </section>
+</article>

demo/advanced/disableDeepWatchers.js

@@ -0,0 +1,10 @@
+'use strict';
+angular.module('datatablesSampleApp').controller('withAjaxCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
+    $scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
+        .withPaginationType('full_numbers');
+    $scope.dtColumns = [
+        DTColumnBuilder.newColumn('id').withTitle('ID'),
+        DTColumnBuilder.newColumn('firstName').withTitle('First name'),
+        DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
+    ];
+});

demo/usages.js

@@ -28,10 +28,10 @@ angular.module('datatablesSampleApp.usages', ['ngResource'])
         label: 'Data reload with Ajax'
     }, {
         name: 'dataReloadWithPromise',
-        label: 'Data reload with promise',
+        label: 'Data reload with promise'
     }, {
         name: 'serverSideProcessing',
-        label: 'Server side processing',
+        label: 'Server side processing'
     }, {
         name: 'angularWayDataChange',
         label: 'Change data with the Angular way'
@@ -47,6 +47,9 @@ angular.module('datatablesSampleApp.usages', ['ngResource'])
     }, {
         name: 'loadOptionsWithPromise',
         label: 'Load DT options with promise'
+    }, {
+        name: 'disableDeepWatchers',
+        label: 'Disable deep watchers'
     }],
     withPlugins: [{
         name: 'withColReorder',

dist/angular-datatables.js

@@ -380,21 +380,20 @@
           return function postLink($scope, $elem, iAttrs, ctrl) {
             function handleChanges(newVal, oldVal) {
               if (newVal !== oldVal) {
-                var newDTOptions = newVal[0], oldDTOptions = oldVal[0];
                 // Do not rerender if we want to reload. There are already
                 // some watchers in the renderers.
-                if (!newDTOptions.reload || newDTOptions.sAjaxSource !== oldDTOptions.sAjaxSource) {
+                if (!newVal.reload || newVal.sAjaxSource !== oldVal.sAjaxSource) {
                   ctrl.render($elem, ctrl.buildOptionsPromise(), _staticHTML);
                 } else {
                   // The reload attribute is set to false here in order
                   // to recall this watcher again
-                  newDTOptions.reload = false;
+                  newVal.reload = false;
                 }
               }
             }
-            // Options can hold heavy data, and other deep/large objects. 
+            // Options can hold heavy data, and other deep/large objects.
             // watchcollection can improve this by only watching shallowly
-            var watchFunction = iAttrs.disableDeepWatchers ? '$watchCollection' : '$watch';
+            var watchFunction = iAttrs.dtDisableDeepWatchers ? '$watchCollection' : '$watch';
             angular.forEach([
               'dtColumns',
               'dtColumnDefs',