0

我想以角度扩展文本类型的输入，这样在用户输入一些文本后，文本值通过自定义过滤器传递，该过滤器在输入输入时进行一些净化，这是我到现在为止的内容，但我是收到错误：

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

1 回答 1

1

我不确定您是要更新模型值还是要更新视图和模型值。我假设两者都是。

要查看格式化程序和 perser 功能：

  • 一旦用户修改了输入，解析器就会被调用。他们格式化来自用户的文本。也就是说，模型更新的视图。

  • 在代码中修改模型时调用格式化程序。如果用户修改输入字段，则不会调用它们。他们格式化发送给用户的文本。也就是说，一个模型来查看变化。

由于更新 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>

编辑：请参阅此plunker以在不使用指令的情况下更新所有输入。

于 2016-09-03T09:49:18.723 回答