fix(uiGridAutoResize): Changed [0].clientHeight to gridUtil.elementHe… (#6490)

* fix(uiGridAutoResize): Changed [0].clientHeight to gridUtil.elementHeight() etc.

* fix(uiGridAutoResize): Changed comparisom of arrays to angular.equals

* fix(uiGridAutoResize): changes after considering lot of comments on my original implementation

Author: tfilo

src/features/auto-resize-grid/js/auto-resize.js

@@ -19,25 +19,32 @@
       require: 'uiGrid',
       scope: false,
       link: function($scope, $elm, $attrs, uiGridCtrl) {
+        var timeout = null;
 
-        $scope.$watch(function() {
-          return $elm[0].clientWidth;
-        }, function(newVal, oldVal) {
-          if (newVal !== oldVal) {
-            uiGridCtrl.grid.gridWidth = newVal;
-            uiGridCtrl.grid.refresh();
+        var debounce = function(width, height) {
+          if (timeout !== null) {
+            clearTimeout(timeout);
           }
-        });
-
-        $scope.$watch(function() {
-          return $elm[0].clientHeight;
-        }, function(newVal, oldVal) {
-          if (newVal !== oldVal) {
-            uiGridCtrl.grid.gridHeight = newVal;
+          timeout = setTimeout(function() {
+            uiGridCtrl.grid.gridWidth = width;
+            uiGridCtrl.grid.gridHeight = height;
             uiGridCtrl.grid.refresh();
+            timeout = null;
+          }, 400);
+        };
+
+        $scope.$watchGroup([
+          function() {
+            return gridUtil.elementWidth($elm);
+          },
+          function() {
+            return gridUtil.elementHeight($elm);
+          }
+        ], function(newValues, oldValues, scope) {
+          if (!angular.equals(newValues, oldValues)) {
+            debounce(newValues[0], newValues[1]);
           }
         });
-
       }
     };
   }]);