Warum erzeugen ng-bind-html und $ sanitize unterschiedliche Ergebnisse?

8

Ich versuche, den Inhalt einiger Textbereiche zu bereinigen, ich kann ng-bind-html nicht verwenden, weil es die Zweiwegbindung unterbricht ( ng-model funktioniert nicht gleichzeitig)

Seltsamerweise, wenn ich ng-bind-html auf ein Modell anwende, erzeugt es ein anderes Ergebnis als wenn ich $sanitize oder $sce innerhalb einer Direktive verwende.

Hier ist eine Probe, die ich gemacht habe

Zypern

Der erste Textbereich verwendet ng-bind-html , der zweite verwendet $sanitize und der dritte sollte der Code für die ng-bind-html-Direktive sein, wenn ich den AngularJS-Quellcode herausreiße.

" wird nur bei Verwendung von ng-bind-html in " geändert, in den beiden anderen Beispielen in "

Wie kann ich die Ergebnisse von ng-bind-html in meiner Direktive replizieren - während die Zwei-Wege-Bindung beibehalten wird?

%Vor% %Vor%
    
Amicable 27.07.2015, 14:44
quelle

1 Antwort

2

Es stellt sich heraus, dass wir erwarten, dass der sanitäre Dienst das gleiche Ergebnis liefert. Platzieren Sie einen Haltepunkt in der ngBindHtmlDirective , Wir kann eintreten und sehen, was passiert. Wir tauchen in und untersuchen Sie die Werte innerhalb des $ SanitizeProvider . Der Wert von buf , der an die ngBindHtmlDirective zurückgegeben wird, lautet:

  

Dies in & amp; # 34; Zitate & amp; # 34; zum Testen

Genau wie wir es für den Aufruf von $ sanitize bekommen, also was ist der wirkliche Unterschied? Der wirkliche Unterschied ist zwischen innerHTML und Wert eines Textfelds. Sehen Sie diese Beispiel Plunker . Sie können den Unterschied zwischen dem Aufrufen der beiden verschiedenen Methoden mit den verschiedenen Möglichkeiten, einem doppelten Anführungszeichen zu entkommen, sehen. Ich habe nicht, obwohl die w3 spec graben oder den Browser-Code, aber ich nehme an, die innerHTML- Zuordnung unter der Haube zusätzliche Arbeit macht einen Document zu schaffen, packte es ist textcontent, dann ist das in das Textfeld den Wert zuweisen. Offensichtlich greift der Wert nur auf die Zeichenfolge und fügt sie so ein, wie sie ist.

Was ist das Problem mit Ihren Anweisungen? Ich sehe, dass element.html(processed) in einem Kommentar ist, aber das Auskommentieren hat keinen Einfluss. Nun, die Wahrheit ist, dass es für einen Bruchteil einer Sekunde funktioniert! Beim Debugger wird der Wert des Textfelds korrekt gesetzt, aber dann wird ein $ digest-Zyklus ausgelöst und sofort geändert! Die Wahrheit ist, die ngModelDirective wird in die Quere, und zwar ist es die $ render Funktion des baseInputType . Wir können im Code sehen, dass es die Methode element.val verwendet.

Wie können wir das in den Richtlinien beheben? Erfordern die ngModelController und außer Kraft setzt seinen $ Funktion machen zu element.html -Methode statt ( Beispiel Plunker ) zu verwenden.

%Vor%     
Jonathan Gawrych 13.02.2016, 06:14
quelle

Tags und Links