fix(tabs): fix object reference-related errors in IE

The tabs component usually only queries the DOM once for all the elements, however when the template gets compiled later on, those references get lost. This fix addresses this by updating the references on the next digest.

Also improves some DOM lookups and removes some that weren't being used anymore.

Referencing #3953.
Fixes #8276.

Closes #8354

src/components/tabs/js/tabsController.js

@@ -76,6 +76,10 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
  bindEvents();
  $mdTheming($element);
  $mdUtil.nextTick(function () {
+ // Note that the element references need to be updated, because certain "browsers"
+ // (IE/Edge) lose them and start throwing "Invalid calling object" errors, when we
+ // compile the element contents down in `compileElement`.
+ elements = getElements();
  updateHeightFromContent();
  adjustOffset();
  updateInkBarStyles();
@@ -91,7 +95,8 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
  */
  function compileTemplate () {
  var template = $attrs.$mdTabsTemplate,
- element = angular.element(elements.data);
+ element = angular.element($element[0].querySelector('md-tab-data'));
+
  element.html(template);
  $compile(element.contents())(ctrl.parent);
  delete $attrs.$mdTabsTemplate;
@@ -219,7 +224,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
  */
  function handleSelectedIndexChange (newValue, oldValue) {
  if (newValue === oldValue) return;
- 
+
  ctrl.selectedIndex = getNearestSafeIndex(newValue);
  ctrl.lastSelectedIndex = oldValue;
  ctrl.updateInkBarStyles();
@@ -428,19 +433,17 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
  */
  function getElements () {
  var elements = {};
+ var node = $element[0];
 
  // gather tab bar elements
- elements.wrapper = $element[ 0 ].getElementsByTagName('md-tabs-wrapper')[ 0 ];
- elements.data = $element[ 0 ].getElementsByTagName('md-tab-data')[ 0 ];
- elements.canvas = elements.wrapper.getElementsByTagName('md-tabs-canvas')[ 0 ];
- elements.paging = elements.canvas.getElementsByTagName('md-pagination-wrapper')[ 0 ];
- elements.tabs = elements.paging.getElementsByTagName('md-tab-item');
- elements.dummies = elements.canvas.getElementsByTagName('md-dummy-tab');
- elements.inkBar = elements.paging.getElementsByTagName('md-ink-bar')[ 0 ];
-
- // gather tab content elements
- elements.contentsWrapper = $element[ 0 ].getElementsByTagName('md-tabs-content-wrapper')[ 0 ];
- elements.contents = elements.contentsWrapper.getElementsByTagName('md-tab-content');
+ elements.wrapper = node.querySelector('md-tabs-wrapper');
+ elements.canvas = elements.wrapper.querySelector('md-tabs-canvas');
+ elements.paging = elements.canvas.querySelector('md-pagination-wrapper');
+ elements.inkBar = elements.paging.querySelector('md-ink-bar');
+
+ elements.contents = node.querySelectorAll('md-tabs-content-wrapper > md-tab-content');
+ elements.tabs = elements.paging.querySelectorAll('md-tab-item');
+ elements.dummies = elements.canvas.querySelectorAll('md-dummy-tab');
 
  return elements;
  }
@@ -494,7 +497,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
  function shouldPaginate () {
  if (ctrl.noPagination || !loaded) return false;
  var canvasWidth = $element.prop('clientWidth');
- angular.forEach(getElements().dummies, function (tab) { canvasWidth -= tab.offsetWidth; });
+ angular.forEach(elements.dummies, function (tab) { canvasWidth -= tab.offsetWidth; });
  return canvasWidth < 0;
  }
 
@@ -563,7 +566,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
  function calcPagingWidth () {
  var width = 1;
 
- angular.forEach(getElements().dummies, function (element) {
+ angular.forEach(elements.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
@@ -613,7 +616,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
  * issues when attempting to focus an item that is out of view.
  */
  function redirectFocus () {
- getElements().dummies[ ctrl.focusIndex ].focus();
+ elements.dummies[ ctrl.focusIndex ].focus();
  }
 
  /**