指令中有多个$ observe

时间:2016-07-13 15:55:01

标签: javascript angularjs angularjs-directive

我试图创建一个只接受数字或十进制数的指令,具体取决于我在输入中插入的属性,我遇到的问题是小数位声明。

实施例: 如果用户只有这个输入接受int数字,那就像

<input only-number type-num="int">

用户只需要输入的小数位

<input only-number type-num="decimal" maxDecimalPoints="2">

但是现在我需要$ observe typeNum和MaxDecimalPoints,我可以将$ observe嵌入彼此吗?我怎么能完成?

这是我的指示:

angular.module('app')
    .directive('onlyNumber', function(){
        return {
            require: '?ngModel',
            link: function(scope, element, attrs, ngModelCtrl) {
                if(!ngModelCtrl) {
                    return;
                }

                // Only Int Numbers
                attrs.$observe('typeNum', function(value){

                    if(value == "int"){
                        ngModelCtrl.$parsers.push(function(val) {
                            if (angular.isUndefined(val)) {
                                var val = '';
                            }
                            var clean = val.replace( /[^0-9]+/g, '');
                            if (val !== clean) {
                                ngModelCtrl.$setViewValue(clean);
                                ngModelCtrl.$render();
                            }
                            return parseInt(clean);
                        });
                    }

                });

                // Only Decimal
                attrs.$observe('typeNum', function(value){

                    if(value == "decimal"){

                        // Now Check limit of decimal places

                    }

                });


                element.bind('keypress', function(event) {
                    if(event.keyCode === 32) {
                        event.preventDefault();
                    }
                });
            }
        };
    });

1 个答案:

答案 0 :(得分:1)

var parser;

attrs.$observe('typeNum', function (typeNum) {
  if (parser) {
    ngModelCtrl.$parsers.splice(ngModelCtrl.$parsers.indexOf(parser), 1);
  }

  switch (typeNum) {
    case 'int':
      parser = intParser;
      break;

    case 'decimal':
      parser = decimalParser;
      break;

    default:
      return;
  }

  ngModelCtrl.$parsers.push(parser);
});

// define intParser and decimalParser here

顺便说一句,请始终向parseIntyou’re in for big trouble添加基数参数:parseInt(clean, 10)