fix(showHide): Don't set up $md-resize $broadcasting $watcher until recieving $md-resize-enable Fixes #5760

Closes #6170

Author: kseamon

src/components/showHide/showHide.js

@@ -19,15 +19,19 @@ function createDirective(name, targetValue) {
       restrict: 'A',
       multiElement: true,
       link: function($scope, $element, $attr) {
-        $scope.$watch($attr[name], function(value) {
-          if (!!value === targetValue) {
-            $mdUtil.nextTick(function() {
-              $scope.$broadcast('$md-resize');
-            });
-            $mdUtil.dom.animator.waitTransitionEnd($element).then(function() {
-              $scope.$broadcast('$md-resize');
-            });
-          }
+        var unregister = $scope.$on('$md-resize-enable', function() {
+          unregister();
+
+          $scope.$watch($attr[name], function(value) {
+            if (!!value === targetValue) {
+              $mdUtil.nextTick(function() {
+                $scope.$broadcast('$md-resize');
+              });
+              $mdUtil.dom.animator.waitTransitionEnd($element).then(function() {
+                $scope.$broadcast('$md-resize');
+              });
+            }
+          });
         });
       }
     };

src/components/showHide/showHide.spec.js

@@ -22,6 +22,7 @@ describe('showHide', function() {
     it('should notify when the node unhides', function() {
       scope.hide = true;
       var element = $compile('<div ng-hide="hide"></div>')(scope);
+      scope.$broadcast('$md-resize-enable');
       scope.$apply();
       expect(spy).not.toHaveBeenCalled();
 
@@ -41,6 +42,7 @@ describe('showHide', function() {
     it('should not notify on hide', function() {
       scope.hide = true;
       var element = $compile('<div ng-hide="hide"></div>')(scope);
+      scope.$broadcast('$md-resize-enable');
       scope.$apply();
 
       // Expect no $broadcasts when hiding.
@@ -49,12 +51,30 @@ describe('showHide', function() {
       scope.$apply();
       expect(spy).not.toHaveBeenCalled();
     });
+
+    it('should not notify when not activated', function() {
+      scope.hide = true;
+      var element = $compile('<div ng-hide="hide"></div>')(scope);
+      scope.$apply();
+      expect(spy).not.toHaveBeenCalled();
+
+      scope.hide = false;
+      scope.$apply();
+      $timeout.flush();
+      expect(spy).not.toHaveBeenCalled();
+
+      spy.calls.reset();
+      defered.resolve();
+      scope.$apply();
+      expect(spy).not.toHaveBeenCalled();
+    });
   });
 
   describe('ng-show', function() {
     it('should notify when the node unhides', function() {
       scope.show = false;
       var element = $compile('<div ng-show="show"></div>')(scope);
+      scope.$broadcast('$md-resize-enable');
       scope.$apply();
       expect(spy).not.toHaveBeenCalled();
 
@@ -74,6 +94,7 @@ describe('showHide', function() {
     it('should not notify on hide', function() {
       scope.show = false;
       var element = $compile('<div ng-show="show"></div>')(scope);
+      scope.$broadcast('$md-resize-enable');
       scope.$apply();
 
       // Expect no $broadcasts when hiding.
@@ -82,5 +103,22 @@ describe('showHide', function() {
       scope.$apply();
       expect(spy).not.toHaveBeenCalled();
     });
+
+    it('should not notify when not activated', function() {
+      scope.show = false;
+      var element = $compile('<div ng-show="show"></div>')(scope);
+      scope.$apply();
+      expect(spy).not.toHaveBeenCalled();
+
+      scope.show = true;
+      scope.$apply();
+      $timeout.flush();
+      expect(spy).not.toHaveBeenCalled();
+
+      spy.calls.reset();
+      defered.resolve();
+      scope.$apply();
+      expect(spy).not.toHaveBeenCalled();
+    });
   });
 });

src/components/virtualRepeat/virtual-repeater.js

@@ -150,6 +150,7 @@ function VirtualRepeatContainerController(
       jWindow.off('resize', debouncedUpdateSize);
     });
 
+    $scope.$emit('$md-resize-enable');
     $scope.$on('$md-resize', boundUpdateSize);
   }));
 }

src/components/virtualRepeat/virtual-repeater.spec.js

@@ -73,6 +73,17 @@ describe('<md-virtual-repeat>', function() {
     return component[0].querySelectorAll('[md-virtual-repeat]');
   }
 
+  it('should $emit $md-resize-enable at startup', function() {
+    var emitted = false;
+    scope.$on('$md-resize-enable', function() {
+      emitted = true;
+    });
+
+    createRepeater();
+
+    expect(emitted).toBe(true);
+  });
+
   it('should render only enough items to fill the viewport + 3 (vertical)', function() {
     createRepeater();
     scope.items = createItems(NUM_ITEMS);