Question

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

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

Answer 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，以便在不使用指令的情况下更新所有输入。

使用我自己的服务扩展输入

1 个答案: