refactor(header.html): split template into directives

New directives and controllers created: * `ngTableFilterRow` directive paired with `ngTableFilterRowController` * `ngTableSorterRow` directive paired with `ngTableSorterRowController` BREAKING CHANGE: The sortBy function previously declared by `ngTableController` has been moved to the new controller - `ngTableSorterRowController`.
esvit · Jul 25, 2015 · 47460d6 · 47460d6
1 parent e563ecd
commit 47460d6
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 42 deletions.
diff --git a/src/ng-table/filterRow.html b/src/ng-table/filterRow.html
@@ -0,0 +1,8 @@
+<tr ng-show="show_filter" class="ng-table-filters">
+    <th data-title-text="{{$column.titleAlt(this) || $column.title(this)}}" ng-repeat="$column in $columns" ng-if="$column.show(this)" class="filter">
+        <div ng-repeat="(name, filter) in $column.filter(this)">
+            <div ng-if="filter.indexOf('/') !== -1" ng-include="filter"></div>
+            <div ng-if="filter.indexOf('/') === -1" ng-include="'ng-table/filters/' + filter + '.html'"></div>
+        </div>
+    </th>
+</tr>
diff --git a/src/ng-table/header.html b/src/ng-table/header.html
@@ -1,26 +1,2 @@
-<tr>
-    <th title="{{$column.headerTitle(this)}}"
-        ng-repeat="$column in $columns"
-        ng-class="{
-                    'sortable': $column.sortable(this),
-                    'sort-asc': params.sorting()[$column.sortable(this)]=='asc',
-                    'sort-desc': params.sorting()[$column.sortable(this)]=='desc'
-                  }"
-        ng-click="sortBy($column, $event)"
-        ng-if="$column.show(this)"
-        ng-init="template = $column.headerTemplateURL(this)"
-        class="header {{$column.class(this)}}">
-          <div ng-if="!template" class="ng-table-header" ng-class="{'sort-indicator': params.settings().sortingIndicator == 'div'}">
-            <span ng-bind="$column.title(this)" ng-class="{'sort-indicator': params.settings().sortingIndicator == 'span'}"></span>
-          </div>
-          <div ng-if="template" ng-include="template"></div>
-    </th>
-</tr>
-<tr ng-show="show_filter" class="ng-table-filters">
-    <th data-title-text="{{$column.titleAlt(this) || $column.title(this)}}" ng-repeat="$column in $columns" ng-if="$column.show(this)" class="filter">
-        <div ng-repeat="(name, filter) in $column.filter(this)">
-            <div ng-if="filter.indexOf('/') !== -1" ng-include="filter"></div>
-            <div ng-if="filter.indexOf('/') === -1" ng-include="'ng-table/filters/' + filter + '.html'"></div>
-        </div>
-    </th>
-</tr>
+<ng-table-sorter-row></ng-table-sorter-row>
+<ng-table-filter-row></ng-table-filter-row>
diff --git a/src/ng-table/sorterRow.html b/src/ng-table/sorterRow.html
@@ -0,0 +1,18 @@
+<tr>
+    <th title="{{$column.headerTitle(this)}}"
+        ng-repeat="$column in $columns"
+        ng-class="{
+                    'sortable': $column.sortable(this),
+                    'sort-asc': params.sorting()[$column.sortable(this)]=='asc',
+                    'sort-desc': params.sorting()[$column.sortable(this)]=='desc'
+                  }"
+        ng-click="sortBy($column, $event)"
+        ng-if="$column.show(this)"
+        ng-init="template = $column.headerTemplateURL(this)"
+        class="header {{$column.class(this)}}">
+        <div ng-if="!template" class="ng-table-header" ng-class="{'sort-indicator': params.settings().sortingIndicator == 'div'}">
+            <span ng-bind="$column.title(this)" ng-class="{'sort-indicator': params.settings().sortingIndicator == 'span'}"></span>
+        </div>
+        <div ng-if="template" ng-include="template"></div>
+    </th>
+</tr>
diff --git a/src/scripts/04-controller.js b/src/scripts/04-controller.js
@@ -42,7 +42,7 @@ function($scope, NgTableParams, $timeout, $parse, $compile, $attrs, $element, ng
     }
 
     $scope.$watch('params.$params', function(newParams, oldParams) {
-        
+
         // We don't want to watch for changes to $params whilst the NgTableParams.reload function is executing
         // (ie $loading === true).
         // This is important for cases where you have a want to *chain* a subsequent call to reload.
@@ -185,21 +185,6 @@ function($scope, NgTableParams, $timeout, $parse, $compile, $attrs, $element, ng
             });
         }
     };
-
-    $scope.sortBy = function($column, event) {
-        var parsedSortable = $column.sortable && $column.sortable();
-        if (!parsedSortable) {
-            return;
-        }
-        var defaultSort = $scope.params.settings().defaultSort;
-        var inverseSort = (defaultSort === 'asc' ? 'desc' : 'asc');
-        var sorting = $scope.params.sorting() && $scope.params.sorting()[parsedSortable] && ($scope.params.sorting()[parsedSortable] === defaultSort);
-        var sortingParams = (event.ctrlKey || event.metaKey) ? $scope.params.sorting() : {};
-        sortingParams[parsedSortable] = (sorting ? inverseSort : defaultSort);
-        $scope.params.parameters({
-            sorting: sortingParams
-        });
-    };
 }]);
 
 
@@ -270,3 +255,47 @@ app.factory('ngTableColumn', [function () {
         buildColumn: buildColumn
     };
 }]);
+
+(function(){
+    'use strict';
+
+    angular.module('ngTable')
+        .controller('ngTableSorterRowController', ngTableSorterRowController);
+
+    ngTableSorterRowController.$inject = ['$scope'];
+
+    function ngTableSorterRowController($scope){
+
+        $scope.sortBy = sortBy;
+
+        ///////////
+
+        function sortBy($column, event) {
+            var parsedSortable = $column.sortable && $column.sortable();
+            if (!parsedSortable) {
+                return;
+            }
+            var defaultSort = $scope.params.settings().defaultSort;
+            var inverseSort = (defaultSort === 'asc' ? 'desc' : 'asc');
+            var sorting = $scope.params.sorting() && $scope.params.sorting()[parsedSortable] && ($scope.params.sorting()[parsedSortable] === defaultSort);
+            var sortingParams = (event.ctrlKey || event.metaKey) ? $scope.params.sorting() : {};
+            sortingParams[parsedSortable] = (sorting ? inverseSort : defaultSort);
+            $scope.params.parameters({
+                sorting: sortingParams
+            });
+        }
+    }
+})();
+
+(function(){
+    'use strict';
+
+    angular.module('ngTable')
+        .controller('ngTableFilterRowController', ngTableFilterRowController);
+
+    ngTableFilterRowController.$inject = [];
+
+    function ngTableFilterRowController(){
+
+    }
+})();
diff --git a/src/scripts/05-directive.js b/src/scripts/05-directive.js
@@ -155,3 +155,43 @@ app.directive('ngTableDynamic', ['$parse', function ($parse){
         }
     };
 }]);
+
+(function(){
+    'use strict';
+
+    angular.module('ngTable')
+        .directive('ngTableFilterRow', ngTableFilterRow);
+
+    ngTableFilterRow.$inject = [];
+
+    function ngTableFilterRow(){
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'ng-table/filterRow.html',
+            scope: true,
+            controller: 'ngTableFilterRowController'
+        };
+        return directive;
+    }
+})();
+
+(function(){
+    'use strict';
+
+    angular.module('ngTable')
+        .directive('ngTableSorterRow', ngTableSorterRow);
+
+    ngTableSorterRow.$inject = [];
+
+    function ngTableSorterRow(){
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'ng-table/sorterRow.html',
+            scope: true,
+            controller: 'ngTableSorterRowController'
+        };
+        return directive;
+    }
+})();