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

in 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只有一个，那么范围并不是为什么你总是得到真或假（我猜）。

我建议您使用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 to return modelValue。 Here is a working plunker。希望有所帮助。

Answer 2

更改行

// scope: {},

到

scope: true,

这将为每个实例提供从父作用域继承的自己的作用域。目前他们都在共享父范围，当一个人将kanaerror附加到范围时，它就在所有范围内。

Answer 3

我的解决方案是返回true或false而不是scope。而且它正在发挥作用。

link: function(scope, element, attrs, ngModelCtrl) {

    if(!ngModelCtrl) {
        return;
    }
    /**
     * 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  
     */
    ngModelCtrl.$validators.katakana = function(model, value) {
        if (value == '' || value == undefined){
            return true;
        }
        var setObjFill = attrs.kataKana.split(',');
        if (setObjFill == 0) {
            var test = KANA_ALL_SIZE_REGEXP.test(value);
        }　else if (setObjFill == 1) {
            var test = KANA_FULL_SIZE_REGEXP.test(value);
        } else {
            var test = KANA_HAFL_SIZE_REGEXP.test(value);
        }
        return test;
    };
}

如何使用多个表单元素的指令

问题

3 个答案: