私自身のサービスを使用して入力を拡大する

タイプテキストの入力を角度を変えて拡張したい場合、ユーザーがテキストを入力した後、テキスト値が入力を入力する際に何らかの浄化を行うカスタムフィルタに渡されます。どのような私が今まで来ているが、私はエラーを取得しています：ここ私自身のサービスを使用して入力を拡大する

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

出典

2016-09-03 Rachmaninoff

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

パーサは、すぐに入力がユーザによって変更されたとして呼び出されます。フォーマッタと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>

EDIT：ディレクティブを使用せずにすべての入力を更新するため、このplunkerを参照してください。

出典

2016-09-03 09:49:18 ScottL

あなたの答えをお寄せいただきありがとうございます。私はこのディレクティブで問題を解決できることを知っていますが、私はこの作業のための別のディレクティブを望んでいません。 – Rachmaninoff

私が追加したプランナーを試してみてください。 – ScottL

私自身のサービスを使用して入力を拡大する

答えて

関連する問題