diff --git a/src/components/tabs/js/tabsController.js b/src/components/tabs/js/tabsController.js
index 48362251fda..7bdb684c456 100644
--- a/src/components/tabs/js/tabsController.js
+++ b/src/components/tabs/js/tabsController.js
@@ -159,6 +159,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
* @param stretchTabs
*/
function handleStretchTabs (stretchTabs) {
+ var elements = getElements();
angular.element(elements.wrapper).toggleClass('md-stretch-tabs', shouldStretchTabs());
updateInkBarStyles();
}
@@ -169,6 +170,8 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
function handleMaxTabWidth (newWidth, oldWidth) {
if (newWidth !== oldWidth) {
+ var elements = getElements();
+
angular.forEach(elements.tabs, function(tab) {
tab.style.maxWidth = newWidth + 'px';
});
@@ -200,7 +203,9 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
* @param left
*/
function handleOffsetChange (left) {
+ var elements = getElements();
var newValue = ctrl.shouldCenterTabs ? '' : '-' + left + 'px';
+
angular.element(elements.paging).css($mdConstant.CSS.TRANSFORM, 'translate3d(' + newValue + ', 0, 0)');
$scope.$broadcast('$mdTabsPaginationChanged');
}
@@ -212,7 +217,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
*/
function handleFocusIndexChange (newIndex, oldIndex) {
if (newIndex === oldIndex) return;
- if (!elements.tabs[ newIndex ]) return;
+ if (!getElements().tabs[ newIndex ]) return;
adjustOffset();
redirectFocus();
}
@@ -320,6 +325,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
* Slides the tabs over approximately one page forward.
*/
function nextPage () {
+ var elements = getElements();
var viewportWidth = elements.canvas.clientWidth,
totalWidth = viewportWidth + ctrl.offsetLeft,
i, tab;
@@ -334,7 +340,8 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
* Slides the tabs over approximately one page backward.
*/
function previousPage () {
- var i, tab;
+ var i, tab, elements = getElements();
+
for (i = 0; i < elements.tabs.length; i++) {
tab = elements.tabs[ i ];
if (tab.offsetLeft + tab.offsetWidth >= ctrl.offsetLeft) break;
@@ -355,7 +362,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
}
function handleInkBar (hide) {
- angular.element(elements.inkBar).toggleClass('ng-hide', hide);
+ angular.element(getElements().inkBar).toggleClass('ng-hide', hide);
}
/**
@@ -461,6 +468,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
* @returns {*|boolean}
*/
function canPageForward () {
+ var elements = getElements();
var lastTab = elements.tabs[ elements.tabs.length - 1 ];
return lastTab && lastTab.offsetLeft + lastTab.offsetWidth > elements.canvas.clientWidth +
ctrl.offsetLeft;
@@ -497,7 +505,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
function shouldPaginate () {
if (ctrl.noPagination || !loaded) return false;
var canvasWidth = $element.prop('clientWidth');
- angular.forEach(elements.dummies, function (tab) { canvasWidth -= tab.offsetWidth; });
+ angular.forEach(getElements().dummies, function (tab) { canvasWidth -= tab.offsetWidth; });
return canvasWidth < 0;
}
@@ -553,6 +561,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
* Sets or clears fixed width for md-pagination-wrapper depending on if tabs should stretch.
*/
function updatePagingWidth() {
+ var elements = getElements();
if (shouldStretchTabs()) {
angular.element(elements.paging).css('width', '');
} else {
@@ -566,7 +575,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
function calcPagingWidth () {
var width = 1;
- angular.forEach(elements.dummies, function (element) {
+ angular.forEach(getElements().dummies, function (element) {
//-- Uses the larger value between `getBoundingClientRect().width` and `offsetWidth`. This
// prevents `offsetWidth` value from being rounded down and causing wrapping issues, but
// also handles scenarios where `getBoundingClientRect()` is inaccurate (ie. tabs inside
@@ -616,13 +625,15 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
* issues when attempting to focus an item that is out of view.
*/
function redirectFocus () {
- elements.dummies[ ctrl.focusIndex ].focus();
+ getElements().dummies[ ctrl.focusIndex ].focus();
}
/**
* Forces the pagination to move the focused tab into view.
*/
function adjustOffset (index) {
+ var elements = getElements();
+
if (index == null) index = ctrl.focusIndex;
if (!elements.tabs[ index ]) return;
if (ctrl.shouldCenterTabs) return;
@@ -669,6 +680,8 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
if (!ctrl.dynamicHeight) return $element.css('height', '');
if (!ctrl.tabs.length) return queue.push(updateHeightFromContent);
+ var elements = getElements();
+
var tabContent = elements.contents[ ctrl.selectedIndex ],
contentHeight = tabContent ? tabContent.offsetHeight : 0,
tabsHeight = elements.wrapper.offsetHeight,
@@ -727,6 +740,8 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
* @returns {*}
*/
function updateInkBarStyles () {
+ var elements = getElements();
+
if (!elements.tabs[ ctrl.selectedIndex ]) {
angular.element(elements.inkBar).css({ left: 'auto', right: 'auto' });
return;
@@ -755,6 +770,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
* Adds left/right classes so that the ink bar will animate properly.
*/
function updateInkBarClassName () {
+ var elements = getElements();
var newIndex = ctrl.selectedIndex,
oldIndex = ctrl.lastSelectedIndex,
ink = angular.element(elements.inkBar);
@@ -770,6 +786,8 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
* @returns {*}
*/
function fixOffset (value) {
+ var elements = getElements();
+
if (!elements.tabs.length || !ctrl.shouldPaginate) return 0;
var lastTab = elements.tabs[ elements.tabs.length - 1 ],
totalWidth = lastTab.offsetLeft + lastTab.offsetWidth;
@@ -784,6 +802,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
* @param element
*/
function attachRipple (scope, element) {
+ var elements = getElements();
var options = { colorElement: angular.element(elements.inkBar) };
$mdTabInkRipple.attach(scope, element, options);
}
diff --git a/src/components/tabs/js/tabsDirective.js b/src/components/tabs/js/tabsDirective.js
index ece61e366f7..0d67992e4cc 100644
--- a/src/components/tabs/js/tabsDirective.js
+++ b/src/components/tabs/js/tabsDirective.js
@@ -154,7 +154,7 @@ function MdTabs () {
'md-scope="::tab.parent"> ' +
'