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

Question

我想扩展 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);
                }
            }
        });

Answer 1

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

查看格式化程序和持久化功能：

一旦用户修改了输入，就会调用解析器。他们格式化来自用户的文本。即一个视图要模型更新。
在代码中修改模型时调用格式化程序。如果用户修改输入字段，则不会调用它们。他们格式化发送给用户的文本。也就是一个模型来查看变化。

因为当 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 以了解在不使用指令的情况下更新所有输入。

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

Extending input by using my own service

directive

angularjs

angular-decorator

angularjs-ng-model

angular-providers