update(tabs): when md-no-disconnect is toggled, tab content will be removed with ng-if for performance reasons

Author: Robert Messerle

src/components/tabs/js/tabsController.js

@@ -196,6 +196,7 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
           isActive: function () { return this.getIndex() === $scope.selectedIndex; },
           isLeft:   function () { return this.getIndex() < $scope.selectedIndex; },
           isRight:  function () { return this.getIndex() > $scope.selectedIndex; },
+          shouldRender: function () { return !$scope.noDisconnect || this.isActive(); },
           hasFocus: function () { return !ctrl.lastClick && ctrl.hasFocus && this.getIndex() === ctrl.focusIndex; },
           id:       $mdUtil.nextUid()
         },

src/components/tabs/js/tabsDirective.js

@@ -182,17 +182,20 @@ function MdTabs ($mdTheming, $mdUtil, $compile) {
               md-swipe-left="swipeContent && $mdTabsCtrl.incrementSelectedIndex(1)"\
               md-swipe-right="swipeContent && $mdTabsCtrl.incrementSelectedIndex(-1)"\
               ng-if="$mdTabsCtrl.hasContent"\
-              ng-repeat="(index, tab) in $mdTabsCtrl.tabs" \
-              md-template="tab.template"\
-              md-scope="tab.parent"\
+              ng-repeat="(index, tab) in $mdTabsCtrl.tabs"\
               md-connected-if="tab.isActive()"\
               ng-class="{\
                 \'md-no-transition\': $mdTabsCtrl.lastSelectedIndex == null,\
                 \'md-active\':        tab.isActive(),\
                 \'md-left\':          tab.isLeft(),\
                 \'md-right\':         tab.isRight(),\
                 \'md-no-scroll\':     dynamicHeight\
-              }"></md-tab-content>\
+              }">\
+            <div\
+                md-template="tab.template"\
+                md-scope="tab.parent"\
+                ng-if="tab.shouldRender()"></div>\
+          </md-tab-content>\
         </md-tabs-content-wrapper>\
       ';
     },

src/components/tabs/tabs.scss

@@ -199,6 +199,9 @@ md-tab-content {
       visibility: hidden;
     }
   }
+  > div.ng-leave {
+    animation: 2 * $swift-ease-in-out-duration md-tab-content-hide;
+  }
 }
 md-ink-bar {
   position: absolute;

src/components/tabs/tabs.spec.js

@@ -240,7 +240,7 @@ describe('<md-tabs>', function() {
                         '<md-tab label="label that!"><b>content</b> that!</md-tab>' +
                         '</md-tabs>');
       expect(tabs1.find('md-tab-item').text()).toBe('label that!');
-      expect(tabs1[0].querySelector('md-tab-content').textContent).toBe('content that!');
+      expect(tabs1[0].querySelector('md-tab-content').textContent.trim()).toBe('content that!');
 
       var tabs2 = setup('<md-tabs>\
         <md-tab>\
@@ -249,8 +249,7 @@ describe('<md-tabs>', function() {
         </md-tab>\
       </md-tabs>');
       expect(tabs1.find('md-tab-item').text()).toBe('label that!');
-      expect(tabs1[0].querySelector('md-tab-content').textContent)
-        .toBe('content that!');
+      expect(tabs1[0].querySelector('md-tab-content').textContent.trim()).toBe('content that!');
     });
 
   });