我想在angular中扩展文本类型的输入，这样在用户输入一些文本后，文本值通过自定义过滤器传递，该过滤器在输入输入时进行一些净化，这是我到现在为止所做的，但我得到了一个错误:
angular.js:13920 TypeError: Cannot read property 'length' of undefined
at addDirective (http://bank.com:4000/vendor/bower_components/angular/angular.js:9495:35)
at collectDirectives (http://bank.com:4000/vendor/bower_components/angular/angular.js:8677:11)
at compileNodes (http://bank.com:4000/vendor/bower_components/angular/angular.js:8539:22)
以下是我所写的:
angular.module('app').config(extendInputDirective);
function extendInputDirective($provide) {
$provide.decorator('inputDirective', function($delegate, $filter) {
debugger;
var directive = $delegate[0];
var link = directive.link;
directive.compile = function() {
return function(scope,element, attrs, ngModel) {
debugger;
if(attrs.type === 'text') {
ngModel.$parsers.unshift(function(viewValue) {
var value = $filter('pArabicCharFilter')(viewValue);
return value;
});
}
link.apply(this, arguments);
}
}
});
我不确定是否要更新模型值或视图和模型值。我认为两者都有。
查看格式化器和存储功能:
-
解析器在用户修改输入时被调用。它们格式化来自用户的文本。也就是从视图到模型的更新
-
在代码中修改模型时调用格式化器。如果用户修改输入字段，则不会调用它们。它们格式化发送给用户的文本。
因为格式化程序在ui更新时不会运行。您需要手动更新视图值，如下面的示例所示，其中输入将自动大写。
(function() {
'use strict';
angular
.module('exampleApp', [])
.directive('capitalize', CapitalizeDirective);
function CapitalizeDirective($filter) {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
function capitalize(text) {
var capitalizedText = $filter('uppercase')(text);
ngModelCtrl.$setViewValue(capitalizedText);
ngModelCtrl.$render();
return capitalizedText;
}
ngModelCtrl.$parsers.push(capitalize);
}
};
}
CapitalizeDirective.$inject = ['$filter'];
})();<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body>
<label>
First name:
<input type="text" name="firstName" ng-model="firstName" capitalize>
</label>
</body>
</html>编辑:查看这个柱塞来更新所有的输入而不使用指令。