Question

我正在尝试实现一个指令，该指令仅用于接受文本框中的字母，即来自a-z或A-z 我确实尝试过这样做，

 angular.module('myApp', []).directive('alphabetsOnly', function(){
return {
 require: 'ngModel',
 link: function(scope, element, attrs, modelCtrl) {
   modelCtrl.$parsers.push(function (inputValue) {

       if (inputValue == undefined) return '' 
       var transformedInput = inputValue.replace(/^[a-zA-Z]+$/, ''); 
       if (transformedInput!=inputValue) {
          modelCtrl.$setViewValue(transformedInput);
          modelCtrl.$render();
       }         

       return transformedInput;         
   });
 }
};
});

function MyCtrl($scope) {
$scope.name = ''
}

但这不起作用。

尝试使用模式

'/^[a-zA-Z]$/'

但没有成功。任何人都可以帮助我。

Answer 1

您只需将括号^移动到括号内以取消字母，将其他所有内容都替换掉。 [^a-zA-Z]。您最后也不需要$。

以下是如何制作更可重复使用的指令的示例。你可以将它用于各种各样的事情。

<input replace="[^a-zA-Z]" with="" ng-model="name">

.directive('replace', function() {
  return {
    require: 'ngModel',
    scope: {
      regex: '@replace',
      with: '@with'
    }, 
    link: function(scope, element, attrs, model) {
      model.$parsers.push(function(val) {
        if (!val) { return; }
        var regex = new RegExp(scope.regex);
        var replaced = val.replace(regex, scope.with); 
        if (replaced !== val) {
          model.$setViewValue(replaced);
          model.$render();
        }         
        return replaced;         
      });
    }
  };
})

如果你想使用这个replace指令，但经常使用一个特定的公式，你可以通过制作另一个使用这个指令的指令来保持你的代码DRY：

<input letters-only ng-model="name">

.directive('lettersOnly', function() {
  return {
    replace: true,
    template: '<input replace="[^a-zA-Z]" with="">'
  };
})

Answer 2

尝试使用以下答案。 100％它会工作.....

var app = angular.module('myApp', []);

(function() {

  app.directive('onlyLettersInput', onlyLettersInput);
  
  function onlyLettersInput() {
      return {
        require: 'ngModel',
        link: function(scope, element, attr, ngModelCtrl) {
          function fromUser(text) {
            var transformedInput = text.replace(/[^a-zA-Z]/g, '');
            //console.log(transformedInput);
            if (transformedInput !== text) {
              ngModelCtrl.$setViewValue(transformedInput);
              ngModelCtrl.$render();
            }
            return transformedInput;
          }
          ngModelCtrl.$parsers.push(fromUser);
        }
      };
    };

})();

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<link href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css" rel="stylesheet"/>
<div ng-app="myApp">
  <div class="row">
    <div class="text-center"><h4>AngularJS Directive - only letters input</h4></div>
    <div class="small-8 small-centered columns panel">
      <form>
        <div class="row">
          <div class="small-3 columns">
            <label for="right-label" class="right inline">Only letters input</label>
          </div>
          <div class="small-9 columns">
            <input only-letters-input type="text" id="right-label" ng-model="myForm.onlyLetters">
          </div>
        </div>
      </form>
      <pre>myForm = {{myForm | json}}</pre>
    </div>
  </div>

指令仅允许视图和模型值中的字母字符

2 个答案: