You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

143 lines
4.3 KiB

7 years ago
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.9.0-rc1-master-3c0ce9b
  6. */
  7. (function() {
  8. 'use strict';
  9. /**
  10. * @ngdoc module
  11. * @name material.components.textField
  12. * @description
  13. * Form
  14. */
  15. angular.module('material.components.textField', [
  16. 'material.core'
  17. ])
  18. .directive('mdInputGroup', mdInputGroupDirective)
  19. .directive('mdInput', mdInputDirective)
  20. .directive('mdTextFloat', mdTextFloatDirective);
  21. function mdTextFloatDirective($mdTheming, $mdUtil, $parse, $log) {
  22. return {
  23. restrict: 'E',
  24. replace: true,
  25. scope : {
  26. fid : '@?mdFid',
  27. label : '@?',
  28. value : '=ngModel'
  29. },
  30. compile : function(element, attr) {
  31. $log.warn('<md-text-float> is deprecated. Please use `<md-input-container>` and `<input>`.' +
  32. 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
  33. if ( angular.isUndefined(attr.mdFid) ) {
  34. attr.mdFid = $mdUtil.nextUid();
  35. }
  36. return {
  37. pre : function(scope, element, attrs) {
  38. var disabledParsed = $parse(attrs.ngDisabled);
  39. scope.isDisabled = function() {
  40. return disabledParsed(scope.$parent);
  41. };
  42. scope.inputType = attrs.type || "text";
  43. },
  44. post: $mdTheming
  45. };
  46. },
  47. template:
  48. '<md-input-group tabindex="-1">' +
  49. ' <label for="{{fid}}" >{{label}}</label>' +
  50. ' <md-input id="{{fid}}" ng-disabled="isDisabled()" ng-model="value" type="{{inputType}}"></md-input>' +
  51. '</md-input-group>'
  52. };
  53. }
  54. mdTextFloatDirective.$inject = ["$mdTheming", "$mdUtil", "$parse", "$log"];
  55. function mdInputGroupDirective($log) {
  56. return {
  57. restrict: 'CE',
  58. controller: ['$element', function($element) {
  59. $log.warn('<md-input-group> is deprecated. Please use `<md-input-container>` and `<input>`.' +
  60. 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
  61. this.setFocused = function(isFocused) {
  62. $element.toggleClass('md-input-focused', !!isFocused);
  63. };
  64. this.setHasValue = function(hasValue) {
  65. $element.toggleClass('md-input-has-value', hasValue );
  66. };
  67. }]
  68. };
  69. }
  70. mdInputGroupDirective.$inject = ["$log"];
  71. function mdInputDirective($mdUtil, $log) {
  72. return {
  73. restrict: 'E',
  74. replace: true,
  75. template: '<input >',
  76. require: ['^?mdInputGroup', '?ngModel'],
  77. link: function(scope, element, attr, ctrls) {
  78. if ( !ctrls[0] ) return;
  79. $log.warn('<md-input> is deprecated. Please use `<md-input-container>` and `<input>`.' +
  80. 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
  81. var inputGroupCtrl = ctrls[0];
  82. var ngModelCtrl = ctrls[1];
  83. scope.$watch(scope.isDisabled, function(isDisabled) {
  84. element.attr('aria-disabled', !!isDisabled);
  85. element.attr('tabindex', !!isDisabled);
  86. });
  87. element.attr('type', attr.type || element.parent().attr('type') || "text");
  88. // When the input value changes, check if it "has" a value, and
  89. // set the appropriate class on the input group
  90. if (ngModelCtrl) {
  91. //Add a $formatter so we don't use up the render function
  92. ngModelCtrl.$formatters.push(function(value) {
  93. inputGroupCtrl.setHasValue( isNotEmpty(value) );
  94. return value;
  95. });
  96. }
  97. element
  98. .on('input', function() {
  99. inputGroupCtrl.setHasValue( isNotEmpty() );
  100. })
  101. .on('focus', function(e) {
  102. // When the input focuses, add the focused class to the group
  103. inputGroupCtrl.setFocused(true);
  104. })
  105. .on('blur', function(e) {
  106. // When the input blurs, remove the focused class from the group
  107. inputGroupCtrl.setFocused(false);
  108. inputGroupCtrl.setHasValue( isNotEmpty() );
  109. });
  110. scope.$on('$destroy', function() {
  111. inputGroupCtrl.setFocused(false);
  112. inputGroupCtrl.setHasValue(false);
  113. });
  114. function isNotEmpty(value) {
  115. value = angular.isUndefined(value) ? element.val() : value;
  116. return (angular.isDefined(value) && (value!==null) &&
  117. (value.toString().trim() !== ""));
  118. }
  119. }
  120. };
  121. }
  122. mdInputDirective.$inject = ["$mdUtil", "$log"];
  123. })();