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

モデル値を更新するのか、ビューとモデル値の両方を更新するのかわかりません。私はそれが両方であると仮定しました。

フォーマッタとパーサーの機能を確認するには:

  • パーサーは、入力がユーザーによって変更されるとすぐに呼び出されます。ユーザーからのテキストをフォーマットします。つまり、ビューからモデルへの更新です。

  • コード内でモデルが変更されると、フォーマッターが呼び出されます。ユーザーが入力フィールドを変更した場合、それらは呼び出されません。それらは、ユーザーに送信されるテキストをフォーマットします。つまり、変更を表示するモデルです。

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>

編集:ディレクティブを使用せずにすべての入力を更新するには、このプランカーを参照してください。

于 2016-09-03T09:49:18.723 に答える