showHide.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. /*!
  2. * AngularJS Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.8-master-aba7b2b
  6. */
  7. (function( window, angular, undefined ){
  8. "use strict";
  9. /**
  10. * @ngdoc module
  11. * @name material.components.showHide
  12. */
  13. // Add additional handlers to ng-show and ng-hide that notify directives
  14. // contained within that they should recompute their size.
  15. // These run in addition to AngularJS's built-in ng-hide and ng-show directives.
  16. angular.module('material.components.showHide', [
  17. 'material.core'
  18. ])
  19. .directive('ngShow', createDirective('ngShow', true))
  20. .directive('ngHide', createDirective('ngHide', false));
  21. function createDirective(name, targetValue) {
  22. return ['$mdUtil', '$window', function($mdUtil, $window) {
  23. return {
  24. restrict: 'A',
  25. multiElement: true,
  26. link: function($scope, $element, $attr) {
  27. var unregister = $scope.$on('$md-resize-enable', function() {
  28. unregister();
  29. var node = $element[0];
  30. var cachedTransitionStyles = node.nodeType === $window.Node.ELEMENT_NODE ?
  31. $window.getComputedStyle(node) : {};
  32. $scope.$watch($attr[name], function(value) {
  33. if (!!value === targetValue) {
  34. $mdUtil.nextTick(function() {
  35. $scope.$broadcast('$md-resize');
  36. });
  37. var opts = {
  38. cachedTransitionStyles: cachedTransitionStyles
  39. };
  40. $mdUtil.dom.animator.waitTransitionEnd($element, opts).then(function() {
  41. $scope.$broadcast('$md-resize');
  42. });
  43. }
  44. });
  45. });
  46. }
  47. };
  48. }];
  49. }
  50. })(window, window.angular);