fix(tabs): fix tab paging and sizing on IE11 when tabs are in a dialog

`elements.dummies` is not always valid on IE11. It often throws `Invalid calling object`.
The fix is to call `getElements()` to do a fresh look up of the selectors each time.
Only doing the `getElements()` call when the exception is throw was tried.
It resulted in improperly loading/sizing of tabs on small screen sizes.

Fixes angular#3953.

src/components/dialog/demoBasicUsage/index.html

@@ -4,16 +4,19 @@
  send focus back to the triggering button.
  </p>
 
- <div class="dialog-demo-content" layout="row" layout-wrap >
- <md-button class="md-primary md-raised" ng-click="showAlert($event)" flex flex-md="100">
+ <div class="dialog-demo-content" layout="row" layout-wrap layout-margin>
+ <md-button class="md-primary md-raised" ng-click="showAlert($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
  Alert Dialog
  </md-button>
- <md-button class="md-primary md-raised" ng-click="showConfirm($event)" flex flex-md="100">
+ <md-button class="md-primary md-raised" ng-click="showConfirm($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
  Confirm Dialog
  </md-button>
- <md-button class="md-primary md-raised" ng-click="showAdvanced($event)" flex flex-md="100">
+ <md-button class="md-primary md-raised" ng-click="showAdvanced($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
  Custom Dialog
  </md-button>
+ <md-button class="md-primary md-raised" ng-click="showTabDialog($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
+ Tab Dialog
+ </md-button>
  </div>
 
  <p class="footer">Note: The <b>Confirm</b> dialog does not use <code>$mdDialog.clickOutsideToClose(true)</code>.</p>
@@ -25,5 +28,4 @@
  </b>
  </div>
 
-
 </div>

src/components/dialog/demoBasicUsage/script.js

@@ -50,6 +50,21 @@ angular.module('dialogDemo1', ['ngMaterial'])
  $scope.status = 'You cancelled the dialog.';
  });
  };
+
+ $scope.showTabDialog = function(ev) {
+ $mdDialog.show({
+ controller: DialogController,
+ templateUrl: 'tabDialog.tmpl.html',
+ parent: angular.element(document.body),
+ targetEvent: ev,
+ clickOutsideToClose:true
+ })
+ .then(function(answer) {
+ $scope.status = 'You said the information was "' + answer + '".';
+ }, function() {
+ $scope.status = 'You cancelled the dialog.';
+ });
+ };
 });
 
 function DialogController($scope, $mdDialog) {

src/components/dialog/demoBasicUsage/tabDialog.tmpl.html

@@ -0,0 +1,50 @@
+<md-dialog aria-label="Mango (Fruit)">
+ <form>
+ <md-toolbar>
+ <div class="md-toolbar-tools">
+ <h2>Mango (Fruit)</h2>
+ <span flex></span>
+ <md-button class="md-icon-button" ng-click="cancel()">
+ <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
+ </md-button>
+ </div>
+ </md-toolbar>
+ <md-dialog-content style="max-width:800px;max-height:810px; ">
+ <md-tabs md-dynamic-height md-border-bottom>
+ <md-tab label="one">
+ <md-content class="md-padding">
+ <h1 class="md-display-2">Tab One</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
+ </md-content>
+ </md-tab>
+ <md-tab label="two">
+ <md-content class="md-padding">
+ <h1 class="md-display-2">Tab Two</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
+ <p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
+ <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
+ </md-content>
+ </md-tab>
+ <md-tab label="three">
+ <md-content class="md-padding">
+ <h1 class="md-display-2">Tab Three</h1>
+ <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
+ </md-content>
+ </md-tab>
+ </md-tabs>
+ </md-dialog-content>
+
+ <div class="md-actions" layout="row">
+ <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
+ More on Wikipedia
+ </md-button>
+ <span flex></span>
+ <md-button ng-click="answer('not useful')" >
+ Not Useful
+ </md-button>
+ <md-button ng-click="answer('useful')" style="margin-right:20px;" >
+ Useful
+ </md-button>
+ </div>
+ </form>
+</md-dialog>

src/components/tabs/js/tabsController.js

@@ -487,7 +487,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;
  }
 
@@ -541,7 +541,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
 
  function updatePagingWidth() {
  var width = 1;
- angular.forEach(elements.dummies, function (element) { width += element.offsetWidth; });
+ angular.forEach(getElements().dummies, function (element) { width += element.offsetWidth; });
  angular.element(elements.paging).css('width', width + 'px');
  }
 
@@ -580,11 +580,11 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
  }
 
  /**
- * This is used to forward focus to dummy elements. This method is necessary to avoid aniation
+ * This is used to forward focus to dummy elements. This method is necessary to avoid animation
  * issues when attempting to focus an item that is out of view.
  */
  function redirectFocus () {
- elements.dummies[ ctrl.focusIndex ].focus();
+ getElements().dummies[ ctrl.focusIndex ].focus();
  }
 
  /**