Direktive $ Formatierer ngModel beeinflussen, wenn

Question

Schreiben Ich habe ein Problem $ Formatierer zu verwenden.

Mein Ziel ist die Telefonnummer zu verstecken, lassen Sie einfach die letzten 4 Zeichen sichtbar. Es ist in Ordnung, wenn Sie nichts in die Eingabe schreiben. Wenn Sie etwas schreiben, das Modell von dem Maske betroffen ist und ich das versteckte Telefon in DB registrieren ...

Hier ist die Direktive ich benutze:

.directive('tsHideField', function() { 
return { 
    require: 'ngModel', 
    restrict: 'A', 
    link: function (scope, element, attributes, controller) { 

     var maskValue = function (value) { 
      if (!value) { 
       return ""; 
      } 
      if (value.length <= 4) { 
       return value; 
      } 
      var valueHide = ""; 
      if (value.indexOf('@') === -1) { 
       //leave last 4 chars 
       valueHide = value.toString().substring(0, value.length - 4).replace(/[\S]/g, "\u2022"); 
       return valueHide + value.toString().substring(value.length - 4); 
      } else { 
       //Adresse email, on laisse après le @ et on cache tout sauf les 4 dernières lettre avant 
       //'lambertjer@gmail.com'.substring(0,'lambertjer@gmail.com'.indexOf('@') - 4).replace(/[\S]/g, "\u2022") + 'lambertjer@gmail.com'.substring('lambertjer@gmail.com'.indexOf('@') - 4) 
       valueHide = value.toString().substring(0, value.indexOf('@') - 4).replace(/[\S]/g, "\u2022"); 
       return valueHide + value.toString().substring(value.indexOf('@') - 4); 
      } 

      // replace all characters with the mask character 
      //return (value || "").replace(/[\S]/g, "\u2022"); 
     } 

     /** SI ON VEUT EGALEMENT CACHER A L ECRIT: 
     * 
     * var createMaskedInputElement = function() { 
      if (! maskedInputElement || ! maskedInputElement.length) { 
       maskedInputElement = element.clone(true); 
       maskedInputElement.attr("type", "password"); // ensure the value is masked 
       maskedInputElement.removeAttr("name"); // ensure the password save prompt won't show 
       maskedInputElement.removeAttr("core.application.main.directive.mask"); // ensure an infinite loop of clones isn't created 
       maskedInputElement.bind("blur", function() { 
        element.removeClass("ng-hide"); 
        maskedInputElement.remove(); 
        maskedInputElement = null; 
       }); 
       $compile(maskedInputElement)(scope); 
       element.after(maskedInputElement); 
      } 
     }; 

     element.bind("focus", function() { 
      createMaskedInputElement(); 
      element.addClass("ng-hide"); 
      maskedInputElement[0].focus(); 
     }); 
     */ 

     controller.$formatters.push(function (value) { 
      return maskValue(value); 
     }); 

    } 
}; 
}); 

Und für Ihre Anlage, hier ist eine Geige mit ein wenig Umsetzung: http://jsfiddle.net/nqp4qtLk/2/

Wie zu verhindern, dass Modell durch die Maske beeinflusst werden ??

EDIT: Ich passe die Antwort von Gr3g auf meine Anforderungen

siehe die aktualisierte Geige zum Spiel: Updated fiddle

Answer 1

Sehen Sie bitte meine EDITED Geigen:

Wenn Sie nicht zulassen * 's gelöscht werden:
Fiddle

Wenn Sie erlauben *' s gelöscht werden:
Punker

Hinweis:
Wenn Sie erlauben * 's gelöscht werden, können Sie in dem Plunker sehen werden ich folgende nicht zulassen:
- Löschen von Sternen, wenn Nummer (en) sichtbar sind.
- eine Zahl zwischen 2 Sternen oder an der ersten Position hinzufügen.

-Code groß geworden ist, so kann ich hier nur teilweise Code zeigen.
Offensichtlich benötigt man die $parsers Pipeline:

controller.$parsers.push(function(val){ 
//Modify your value 
return modifiedValue || val; 
}); 

Hinweis i hinzugefügt 2 Funktionen in jeder Pipeline so kann ich einen String in der Funktion zuzugreifen, in dem ich den Wert ändern müssen. Ich muss mich nicht (zu viel) um Guss kümmern.

Sie können es wahrscheinlich schneller machen, aber seien Sie vorsichtig beim Refactoring, um über alle Möglichkeiten nachzudenken, mit denen Sie umgehen müssen.Vor allem wenn * s gelöscht werden kann.

Answer 2

Sie $ parsers.push verwenden Wert zu steuern, in dem Modell gespeichert werden.

var unmask = function(value) { 
     var original = scope.vm.phone.toString();     
     var last4 = value.substring(value.length-4); 
     var newstr = original.substring(0, original.length-4); 
     return (newstr+last4); 
     // you can have whatever logic you want, to manipulate the original value 
    } 

    controller.$parsers.push(function (value) { 
     return unmask(value); 
     // or do what ever you want. 
    }); 

fiddle- Aktualisiert http://jsfiddle.net/anh9y8d9/3/

Answer 3

Ich glaube nicht, können Sie, sich vorstellen, ich gehe zwischen 2 Punkten und löschen ein, wie werden Sie tun?

Sie 2 differents Komponenten verwenden sollte: ein jedes Zeichen zu geben, die anderen angezeigt, um die Telefonnummer mit nur 4 zuletzt zeigt.

Die härteste Art und Weise: behandelt all wichtiges Ereignis am Eingang selbst so könnte man sogar lösen, was ich am Anfang meiner Post sagte.