Question

我有一个在filters on ng-model in an input之后制作的自定义指令，它只将输入限制为数字：

     .directive('onlydigitinput', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue.toLowerCase().replace(/ /g, '')
                  .replace(/[^0-9]+/g, '');
                if (transformedInput != inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }
                return transformedInput;
            });
        }
    };
})

单独运作很好，但显然与标准指令一起使用必需，它开始失败。

我使用以下HTML（jade语法）：

input(type='text' , required, onlydigitinput,  min='1', max='99', maxlength='2')

（我不使用type ='number'，因为它与maxlength：maxlength ignored for input type="number" in Chrome混淆，并且也忽略了我的指令）

当我输入数字时，它工作正常。字段有效。当我尝试输入数字然后输入一些字母时，它工作正常：字段有效，我不能输入非数字。但是当我从非数字开始时，字段无效但我仍然可以输入字母，这会伴随以下错误：

TypeError: Cannot read property 'toLowerCase' of undefined
at http://localhost:3000/scripts/core/directives/systemDirectives.js:63:54

指的是上面指令中使用toLowerCase。请告知我如何清除此错误并使我的指令在后一种情况下也能正常运行，并避免错误。

Answer 1

输入字段上有必填字段验证程序。因此，当您将字段设置为空白（“”）时 - 键入非数字时会发生。该值变为未定义。

var transformedInput = inputValue.toLowerCase().replace(/ /g, '')
              .replace(/[^0-9]+/g, '');
            if (transformedInput != inputValue) {
                modelCtrl.$setViewValue(transformedInput);
                modelCtrl.$render();
            }

在上面的代码上添加以下内容：

if(!inputValue) return ;

angular require指令打破了我自己的指令

1 个答案: