Merge pull request #382 from jeff-phillips-18/remove-scope

Use $doCheck instead of $scope.$watch in filter, sort, and toolbar co…

Author: dtaylor113

src/filters/filter-fields-component.js

@@ -27,10 +27,11 @@ angular.module('patternfly.filters').component('pfFilterFields', {
     addFilterFn: '<'
   },
   templateUrl: 'filters/filter-fields.html',
-  controller: function ($scope) {
+  controller: function () {
     'use strict';
 
     var ctrl = this;
+    var prevConfig;
 
     ctrl.$onInit = function () {
       angular.extend(ctrl, {
@@ -40,42 +41,58 @@ angular.module('patternfly.filters').component('pfFilterFields', {
       });
     };
 
-    ctrl.$postLink = function () {
-      $scope.$watch('config', function () {
+    ctrl.$onChanges = function () {
+      setupConfig ();
+    };
+
+    ctrl.$doCheck = function () {
+      // do a deep compare on config
+      if (!angular.equals(ctrl.config, prevConfig)) {
         setupConfig();
-      }, true);
+      }
     };
 
     function selectField (item) {
       ctrl.currentField = item;
-      ctrl.config.currentValue = null;
+      ctrl.currentValue = null;
     }
 
     function selectValue (filterValue) {
       if (angular.isDefined(filterValue)) {
-        ctrl.addFilterFn(scope.currentField, filterValue);
-        ctrl.config.currentValue = null;
+        ctrl.addFilterFn(ctrl.currentField, filterValue);
+        ctrl.currentValue = null;
       }
     }
 
     function onValueKeyPress (keyEvent) {
       if (keyEvent.which === 13) {
-        ctrl.addFilterFn(ctrl.currentField, ctrl.config.currentValue);
-        ctrl.config.currentValue = undefined;
+        ctrl.addFilterFn(ctrl.currentField, ctrl.currentValue);
+        ctrl.currentValue = undefined;
       }
     }
 
     function setupConfig () {
-      if (ctrl.fields === undefined) {
-        ctrl.fields = [];
+      var fieldFound = false;
+
+      prevConfig = angular.copy(ctrl.config);
+
+      if (ctrl.config.fields === undefined) {
+        ctrl.config.fields = [];
+      }
+
+      if (ctrl.currentField) {
+        fieldFound = _.find(ctrl.config.fields, function (nextField) {
+          return nextField.id === ctrl.currentField.id;
+        });
       }
-      if (!ctrl.currentField) {
+
+      if (!fieldFound) {
         ctrl.currentField = ctrl.config.fields[0];
-        ctrl.config.currentValue = null;
+        ctrl.currentValue = null;
       }
 
-      if (ctrl.config.currentValue === undefined) {
-        ctrl.config.currentValue = null;
+      if (ctrl.currentValue === undefined) {
+        ctrl.currentValue = null;
       }
     }
   }

src/filters/filter-fields.html

@@ -14,14 +14,14 @@
       </ul>
     </div>
     <div ng-if="$ctrl.currentField.filterType !== 'select'">
-      <input class="form-control" type="{{$ctrl.currentField.filterType}}" ng-model="$ctrl.config.currentValue"
+      <input class="form-control" type="{{$ctrl.currentField.filterType}}" ng-model="$ctrl.currentValue"
              placeholder="{{$ctrl.currentField.placeholder}}"
              ng-keypress="$ctrl.onValueKeyPress($event)"/>
     </div>
     <div ng-if="$ctrl.currentField.filterType === 'select'">
       <div class="btn-group bootstrap-select form-control filter-select" uib-dropdown >
         <button type="button" uib-dropdown-toggle class="btn btn-default dropdown-toggle">
-          <span class="filter-option pull-left">{{$ctrl.config.currentValue || $ctrl.currentField.placeholder}}</span>
+          <span class="filter-option pull-left">{{$ctrl.currentValue || $ctrl.currentField.placeholder}}</span>
           <span class="caret"></span>
         </button>
         <ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
@@ -30,7 +30,7 @@
               {{$ctrl.currentField.placeholder}}
             </a>
           </li>
-          <li ng-repeat="filterValue in $ctrl.currentField.filterValues" ng-class="{'selected': filterValue === $ctrl.config.currentValue}">
+          <li ng-repeat="filterValue in $ctrl.currentField.filterValues" ng-class="{'selected': filterValue === $ctrl.currentValue}">
             <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterValue)">
               {{filterValue}}
             </a>

src/filters/filter-results-component.js

@@ -28,10 +28,11 @@ angular.module('patternfly.filters').component('pfFilterResults', {
     config: '='
   },
   templateUrl: 'filters/filter-results.html',
-  controller: function ($scope) {
+  controller: function () {
     'use strict';
 
     var ctrl = this;
+    var prevConfig;
 
     ctrl.$onInit = function () {
       angular.extend(ctrl, {
@@ -40,13 +41,20 @@ angular.module('patternfly.filters').component('pfFilterResults', {
       });
     };
 
-    ctrl.$postLink = function () {
-      $scope.$watch('config', function () {
-        setupConfig();
-      }, true);
+    ctrl.$onChanges = function () {
+      setupConfig ();
+    };
+
+    ctrl.$doCheck = function () {
+      // do a deep compare on config
+      if (!angular.equals(ctrl.config, prevConfig)) {
+//        setupConfig();
+      }
     };
 
     function setupConfig () {
+      prevConfig = angular.copy(ctrl.config);
+
       if (!ctrl.config.appliedFilters) {
         ctrl.config.appliedFilters = [];
       }

src/sort/sort-component.js

@@ -3,31 +3,36 @@ angular.module('patternfly.sort').component('pfSort', {
     config: '='
   },
   templateUrl: 'sort/sort.html',
-  controller: function ($scope) {
+  controller: function () {
     'use strict';
 
     var ctrl = this;
+    var prevConfig;
 
     ctrl.$onInit = function () {
       angular.extend(ctrl, {
         selectField: selectField,
         changeDirection: changeDirection,
         getSortIconClass: getSortIconClass
       });
+    };
 
+    ctrl.$onChanges = function () {
       setupConfig();
-
     };
 
-    ctrl.$postLink = function () {
-      $scope.$watch('config', function () {
+    ctrl.$doCheck = function () {
+      // do a deep compare on config
+      if (!angular.equals(ctrl.config, prevConfig)) {
         setupConfig();
-      }, true);
+      }
     };
 
     function setupConfig () {
       var updated = false;
 
+      prevConfig = angular.copy(ctrl.config);
+
       if (ctrl.config.fields === undefined) {
         ctrl.config.fields = [];
       }

src/toolbars/toolbar-component.js

@@ -6,10 +6,11 @@ angular.module('patternfly.toolbars').component('pfToolbar', {
     'actions': '?'
   },
   templateUrl: 'toolbars/toolbar.html',
-  controller: function ($scope) {
+  controller: function () {
     'use strict';
 
     var ctrl = this;
+    var prevConfig;
 
     ctrl.$onInit = function () {
       angular.extend(ctrl, {
@@ -21,18 +22,29 @@ angular.module('patternfly.toolbars').component('pfToolbar', {
       });
     };
 
-    ctrl.$postLink = function () {
-      $scope.$watch('config', function () {
-        if (ctrl.config && ctrl.config.viewsConfig && ctrl.config.viewsConfig.views) {
-          ctrl.config.viewsConfig.viewsList = angular.copy(ctrl.config.viewsConfig.views);
+    ctrl.$onChanges = function () {
+      setupConfig ();
+    };
 
-          if (!ctrl.config.viewsConfig.currentView) {
-            ctrl.config.viewsConfig.currentView = ctrl.config.viewsConfig.viewsList[0];
-          }
-        }
-      }, true);
+    ctrl.$doCheck = function () {
+      // do a deep compare on config
+      if (!angular.equals(ctrl.config, prevConfig)) {
+        setupConfig();
+      }
     };
 
+    function setupConfig () {
+      prevConfig = angular.copy(ctrl.config);
+
+      if (ctrl.config && ctrl.config.viewsConfig && ctrl.config.viewsConfig.views) {
+        ctrl.config.viewsConfig.viewsList = angular.copy(ctrl.config.viewsConfig.views);
+
+        if (!ctrl.config.viewsConfig.currentView) {
+          ctrl.config.viewsConfig.currentView = ctrl.config.viewsConfig.viewsList[0];
+        }
+      }
+    }
+
     function viewSelected (viewId) {
       ctrl.config.viewsConfig.currentView = viewId;
       if (ctrl.config.viewsConfig.onViewSelect && !ctrl.checkViewDisabled(viewId)) {