Question

我正在试图找出是否有办法将指令绑定到所有<input type="number">元素而不必返回并为每个数字字段添加类，附加属性等？

我有很多数字字段，所以我希望避免更新它们。

Answer 1

由于没有出现特定绑定到输入类型的方法，我最后创建了一个绑定到每个输入的简单指令，然后将指令的功能隔离到数字类型的输入。

.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);
          }

      }
    }
}])

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

1 个答案: