javascript - 如何对多个表单元素使用指令

Question

我想检查输入是否是片假名字符。

此代码适用于一个元素:

var KANA_FULL_SIZE_REGEXP = /^([ァ-ン。、ー「」．\s]+)$/;
var KANA_HAFL_SIZE_REGEXP = /^([ｧ-ﾝﾞﾟ｡｢｣､･ｰ\s]+)$/;
var KANA_ALL_SIZE_REGEXP = /^([ァ-ンｧ-ﾝﾞﾟ｡`-｢｣．。､ー「」･\s]+)$/;

 app.directive('kataKana', function() {
    return {
        // restrict: 'A',
        // scope: {},
        require: '?ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {

            if(!ngModelCtrl) {
                return;
            }

            if (ngModelCtrl.$isEmpty(element.val())) {
               scope.kanaerror = false;
            }

            element.bind('keypress', function(event) {

                if(event.keyCode === 32) {
                    event.preventDefault();
                }
            });
            /**
             * var setObjFill 
             *     setObjFill == 0 check katakana full size and half size
             *     setObjFill == 1 check katakana only full size
             *     setObjFill == 2 check katakana only half size  
             */
            element.bind('keyup', function(event) {
                if (!element.val() || element.val() == null || element.val() == '') {
                    scope.kanaerror = false;
                } else {
                    var setObjFill = attrs.kataKana.split(',');
                    if(setObjFill == 0) {
                        if (KANA_ALL_SIZE_REGEXP.test(element.val())) {
                            scope.kanaerror = false;
                        } else {
                            scope.kanaerror = true;
                        }
                    }　else if (setObjFill == 1) {
                        console.log('ee');
                        if (KANA_FULL_SIZE_REGEXP.test(element.val())) {
                            scope.kanaerror = false;
                        } else {
                            scope.kanaerror = true;
                        }
                    } else {
                        if (KANA_HAFL_SIZE_REGEXP.test(element.val())) {
                            scope.kanaerror = false;
                        } else {
                            scope.kanaerror = true;
                        }
                    }
                }

                scope.$apply();
            });
        }
    };
 });

在 html 中:

<input id="txt_kana" kata-kana="1" name="txt_kana">

问题

如果在这种形式中我们使用 kata-kana="1" 两次，我的代码总是为两个元素返回 true 或 false kata-kana="1"。因为我的代码返回 scope.kanaerror。但我不知道如何解决这个问题。

Answer 1

我想您想通过观察共享范围的scope.kanaerror来检查输入是否是片假名日语。如果您有多个输入，但您的scope.kanaerror只有一个，那么范围不会被隔离，这就是为什么您总是得到true或false(我猜)。

我建议您使用 ng-model 作为输入，并检查每个输入的模型本身(如果您有两个以上的输入)。

<input id="txt_kana" ng-model='input1' kata-kana name="txt_kana">
<input id="txt_kana" ng-model='input2' kata-kana name="txt_kana">

在你的指令中:

app.directive('kataKana', function() {
  return {
    // restrict: 'A',
    // scope: {},
    require: '?ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      var KANA_ALL_SIZE_REGEXP = /\d+/g;
      var KANA_FULL_SIZE_REGEXP = /[A-Z]/g;
      var KANA_HAFL_SIZE_REGEXP = /[a-z]/g;


      ngModelCtrl.$parsers.push(function(viewValue) {
        // this is to limit input charactor
        element.bind('keypress', function(event) {
          if (event.keyCode === 5) {
            event.preventDefault();
            return false;
          }
        });
        if (!viewValue) {
          return false; // return to modelValue for controller
        }
        if (KANA_ALL_SIZE_REGEXP.test(viewValue)) {
          return 'helo'; // return to modelValue for controller and interpolation
        } else if (KANA_FULL_SIZE_REGEXP.test(viewValue)) {
          return 'hi'; //return to modelValue for controller
        } else if (KANA_HAFL_SIZE_REGEXP.test(viewValue)) {
          return 'hey'; //return to modelValue for controller
        }

      })
    }
  };
});

我重构了你的代码，但由于我无法输入日语，所以我更改了正则表达式。我希望你能明白。在我的代码中，我使用 ngModelcontroler.$parsers 和 viewValue 返回由 Controller 和插值使用的 modelValue 。 Here is a working plunker 。希望有所帮助。