Angular 1.4.7指令绑定到所有数字输入

Question

I'm trying to figure out if there is a way to bind a directive to all <input type="number"> elements without having to go back and add a class, additional attribute, etc. to each number field?

I have a lot of number fields so I was hoping to avoid having to update them all.

Answer 1

Since it doesn't appear that there is a way to bind specifically to an input type, I just ended up creating a simple directive bound to every input and then isolated the functionality of the directive to inputs of the number type.

.directive('input', ['$document', '$log', '$filter', function ($document, $log, $filter) {
    return {
      restrict: 'E',
      require:  '?ngModel',
      scope:    {
        directiveConfig:        '=',
        controllerInterface:    '='
      },

      link: function (scope, element, attrs, ngModelCtrl) {
        // --------------------------------------------------------------
        // Formatters & Parsers for `input[type="number"]` only
        // --------------------------------------------------------------
          if (attrs.type === "number") {
            // Prevents number inputs from using scrolling to change number.
            element.bind('mousewheel', function (event) {
              event.preventDefault();
            });

            // Prevents number input from changing with up/down arrow keys and
            // instead simulates tabbing. 
            element.bind("keydown keypress", function (event) {
              var inputs = element.closest('form').find(':input'); 

              switch (event.which) {
                case 38:
                  // Arrow Up: 38
                  inputs.eq( inputs.index(element) - 1 ).focus();
                  event.preventDefault();
                  break;
                case 40:
                  // Arrow Down: 40
                  inputs.eq( inputs.index(element) + 1 ).focus();
                  event.preventDefault();
                  break;
                default:
                  break;
              }
            });

            // Ensures that only numbers can be entered.
            var numericUserInput = function(value) {
              var parsed = null;

              if ($filter('exists')(value)) {
                parsed = parseFloat(value.toString().replace(/[^0-9.]+$/, ''), 10);

                if (typeof(value) != "number") {
                  parsed = null;
                }

                if (parsed !== value) {
                  ngModelCtrl.$setViewValue(parsed);
                  ngModelCtrl.$render();
                }
              }

              return parsed;
            } 

            ngModelCtrl.$parsers.push(numericUserInput);
          }

      }
    }
}])