Erweitern der Eingabe mit meinem eigenen Service

Ich möchte die Eingabe von Typ Text in eckigen so erweitern, dass nach der Eingabe von Text durch den Benutzer wird der Text Wert durch einen benutzerdefinierten Filter, die einige Reinigung bei der Eingabe, hier ist was ich bis jetzt gekommen sind, aber ich eine Störung erhalte:Erweitern der Eingabe mit meinem eigenen Service

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)

hier ist das, was ich geschrieben habe:

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

Quelle

2016-09-03 Rachmaninoff

ich bin nicht sicher, ob Sie die Modellwert oder beide der aktualisierenden Ansicht und Modellwert. Ich habe angenommen, dass es beides ist.

Um den Formatierer und perser Funktionalität zu überprüfen:

Parser wird, sobald der Eingang geändert wird vom Benutzer aufgerufen. Sie formatieren den Text vom Benutzer. Das heißt, eine Ansicht zum Modellupdate.
Formatierer werden aufgerufen, wenn das Modell im Code geändert wird. Sie werden nicht aufgerufen, wenn der Benutzer das Eingabefeld ändert. Sie formatieren den Text, der an den Benutzer geht. Das heißt, ein Modell zum Anzeigen von Änderungen.

Da Formatierer nicht ausgeführt werden, wenn die UI aktualisiert wird. Sie müssten den Ansichtswert manuell aktualisieren, wie im folgenden Beispiel, in dem die Eingabe automatisch groß geschrieben wird.

(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: siehe diese plunker ohne alle Eingänge zum Aktualisieren einer Direktive.

Quelle

2016-09-03 09:49:18 ScottL

Danke für Ihre Antwort, ich weiß, dass eine Direktive das Problem lösen kann, aber ich möchte keine separate Direktive für diese Aufgabe haben. Ich möchte, dass meine gewünschte Funktionalität in allen Eingabedirektiven verfügbar ist, ohne eine zusätzliche Direktive hinzuzufügen – Rachmaninoff

Probieren Sie den Plunker, den ich hinzugefügt habe. – ScottL

Erweitern der Eingabe mit meinem eigenen Service

Antwort

Verwandte Themen