diff --git a/src/components/tabs/js/tabsDirective.js b/src/components/tabs/js/tabsDirective.js index 328ce9a45cc..2ecaeeff67a 100644 --- a/src/components/tabs/js/tabsDirective.js +++ b/src/components/tabs/js/tabsDirective.js @@ -181,7 +181,7 @@ function MdTabs ($mdTheming, $mdUtil, $compile) { ng-repeat="(index, tab) in $mdTabsCtrl.tabs" \ md-template="tab.template"\ md-scope="tab.parent"\ - ng-if="tab.isActive()"\ + md-connected-if="tab.isActive()"\ ng-class="{\ \'md-no-transition\': $mdTabsCtrl.lastSelectedIndex == null,\ \'md-active\': tab.isActive(),\ diff --git a/src/components/tabs/js/templateDirective.js b/src/components/tabs/js/templateDirective.js index 067e302de53..1c5fecc58d7 100644 --- a/src/components/tabs/js/templateDirective.js +++ b/src/components/tabs/js/templateDirective.js @@ -2,19 +2,36 @@ angular .module('material.components.tabs') .directive('mdTemplate', MdTemplate); -function MdTemplate ($compile) { +function MdTemplate ($compile, $mdUtil, $timeout) { return { restrict: 'A', link: link, scope: { template: '=mdTemplate', - compileScope: '=mdScope' + compileScope: '=mdScope', + connected: '=?mdConnectedIf' }, require: '^?mdTabs' }; function link (scope, element, attr, ctrl) { if (!ctrl) return; + var connected = true; element.html(scope.template); $compile(element.contents())(scope.compileScope); + $timeout(handleScope); + function handleScope () { + scope.$watch('connected', function (value) { value ? disconnect() : reconnect(); }); + scope.$on('$destroy', reconnect); + } + function disconnect () { + if (!connected) return; + $mdUtil.disconnectScope(scope.compileScope); + connected = false; + } + function reconnect () { + if (connected) return; + $mdUtil.reconnectScope(scope.compileScope); + connected = true; + } } } diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index 029419fb865..71e944c6445 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -63,6 +63,11 @@ md-tabs { padding-bottom: 11px; } } + &:not([md-dynamic-height]) { + md-tabs-content-wrapper { + top: $tabs-header-height + 1; + } + } } } md-tabs-wrapper {