maak.fischer

diplom medienberater

Juli 2014

Text mit HTML ausgeben – nicht immer einfach

AngularJS
2. Juli 2014

Da saß ich also nun und wollte eine scheinbar einfache Aufgabe mit AngularJS lösen.

Die Aufgabe

Es gibt ein längeres Textfeld, das man mittels einer Textarea bearbeiten können soll. Als Besonderheit gilt es, quasi eine Historie des Inhalts des Felds anzulegen.

Das heißt, dass der bisherige Feldinhalt – mit Abstand und Strich getrennt – hinter dem neuen neuen Text mitgeführt wird:

Neuer Text
________

Alter Text

Die Umsetzung

Der Code-Schnipsel zum Zusammenbauen sieht wie folgt aus:

$scope.text = $neuer_text +
'<br />______<br /><br />' +
$scope.text;

Damit AngularJS das HTML auch berücksichtigt, muss ihm mitgeteilt werden, dass das HTML sicher ist. Dazu gibt es das Strict Contextual Escaping ($sce). Auf den auszugebenden Text angewendet:

$scope.text = $sce.trustAsHtml($scope.text);

Im HTML-View kann auf die aufbereitete Variable nicht wie üblich mit {{text}} zugegriffen werden. Stattdessen findet eine AngularJS-Direktive Anwendung:

<span bg-bind-html="text"></span>

Artikel auf Stackoverflow

Das Problem

$sce.trustAsHtml erwartet als Parameter einen String und kann nicht damit umgehen, wenn die übergebene Variable nicht gesetzt ist (undefined).

AngularJS-Dokumentation

Die Lösung

Entweder sicherstellen, dass die Variable stets initialisiert ist (var variable = „“), oder trustAsHtml unter Umständen nicht anwenden:

if (typeof($scope.text) === "string") {
    $scope.text = $sce.trustAsHtml($scope.text);
}

Der Artikel erscheint trivial. Die genauen Umstände kann ich in der Kürze der Zeit hier nicht erfassen. Ich reiche das gegebenenfalls noch nach.

© 2009 maakfischer

alle rechte vorbehalten • kontaktimpressumseitenanfang ↑