maak.fischer

diplom medienberater

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.

mindmeister

meinung
20. Juni 2014

Verwende ich sowohl als App auf iPad und iPhone, als auch als Webapp.
Hat mich einfach überzeugt. Wer ein Programm zum Erstellen von Mindmaps sucht, sollte sich dieses exzellente Werkzeug ansehen.

parseInt

JavaScript
28. September 2012

Beim Umwandeln von Strings nach Zahlen schleicht sich unter Umständen folgender Flüchtigkeitsfehler ein:

Enthält der String eine Zahl mit führenden Nullen, so wird die Zahl als Oktalzahl interpretiert. Um die Zahl trotzdem als Dezimalzahl zu erkennen, muss parseInt ein weiterer, optionaler Parameter übergeben werden.

Beispiel

var string = "0987";
var oktaltest = parseInt(string);
var dezimalzahl = parseInt(string, 10);
var oktalzahl = parseInt(014);

oktaltest ist 0, weil die 9 eine ungültige Ziffer im Oktalsystem ist

dezimalzahl ist 987

oktalzahl ist 12

 

VMware Tools unter Debian aktualisieren

tipps
21. Juni 2010

Mag sein, dass das Thema für viele erschöpfend behandelt wurde. Mir ist allerdings aufgefallen, dass die verfügbaren Anleitungen zum Teil ungenau und/oder fehlerhaft waren. Also versuche ich mich an einem eigenen Entwurf…

Den ganzen Artikel lesen »

Zwei Bilder übereinander legen

html
23. April 2010

„Da beisst dich doch der Zeisig“, wie der gute Fips Asmussen sagte. Da stand ich also vor dem Problem, ein Vorschaubild für ein Video auf eine Website zu bringen. Das allein stellte noch nicht das Problem dar. Vielmehr wollte ich über das Vorschaubild ein zweites legen, welches die Abspielmöglichkeit mit einem Play-Knopf anzeigt. Aber wie geht sowas?

Den ganzen Artikel lesen »

(Web-)Design

meinung
24. Juni 2009

Folgendes bei YouTube gefundene Beispiel verdeutlicht präzise, wie man als Webworker und Designer von seinen Kunden behandelt wird. Ändert sich das denn nie?

frontpeetsch

projekte
17. Juni 2009

frontpeetsch – so wird vermutlich meine erste bei FontStruct konstruierte Schrift heißen. Diesen Namen habe ich aus gutem Grund gewählt. Denn er soll den Bezug der Schrift zu ihrem Urpsrung herausstellen.

FontStruct eignet sich nicht wirklich zum Entwerfen oder pflegen jedweder erdenklichen Schriftart. Es handelt sich dabei eher um ein einfach gehaltenes Werkzeug, mit dem man Schriften quasi spielerisch erarbeiten kann. Also war ich auf der Suche nach einem Schriftentwurf, den man ernsthaft mit FontStruct umsetzen könnte.

Ich erinnerte mich daran, wie fasziniert ich seinerzeit vom Design und vor allem der Typografie der Techno-Zeitschrift Frontpage war. Jedes Jahr änderte sich die Typo (nicht nur) für die erste Umschlagseite. Und in einem Jahr verwendete man eine für meine Zwecke passende Schrift.

Da mir diese Schrift auch noch gefällt, habe ich meine Interpretation ihres Themas in FontStruct in Angriff genommen:

Galerie

maak
13. Mai 2009

Nur ein Test…

Ob es funktioniert?

Update

forschung
11. Mai 2009

Endlich bin ich dazu gekommen, den Bereich Forschung und Lehre zu aktualisieren. Dort ist nun nachzulesen, welche Lehrveranstaltungen ich durchgeführt oder betreut habe.

Aus den älteren Jahrgängen fehlen noch wenige Einträge. Die werde ich zu gegebener Zeit nachreichen.

Tweet!

neues
9. April 2009

Es kommt, wie es kommen musste…

Den ganzen Artikel lesen »

staatbereit

neues
20. Februar 2009

Mittlerweile habe ich mich durch die Tiefen von WordPress gekämpft und maakfischer.de soweit verbogen, dass es meinen Vorstellungen entspricht.

Endlich kann ich mich daran machen, mich um wichtigeres zu kümmern. Zum Beispiel Inhalte einfügen und meine kommerzielle Website maaketgimmicks voran zu bringen.

geschalten

neues
18. Februar 2009

Was ist das eigentlich mit diesem:

«Ich habe geschalten.»

Und artverwandte Katastrophen…

Den ganzen Artikel lesen »

feesbuck

neues
11. Februar 2009

Auch ich habe mich der Faszination von facebook nicht länger entziehen können.

Update vom 18.02.2009 bzgl. geänderter AGB.

Den ganzen Artikel lesen »

Der frühe Fischer…

neues
7. Februar 2009

…hat seine Angel hoffentlich in den richtigen Teich geschmissen :-) Jedenfalls bin ich vor ein paar Wochen über eine neue Community gestolpert: grafiker.de. Genau mein Ding!

Den ganzen Artikel lesen »

Kranke Leute allerorten

neues
3. Februar 2009

Hier in Berlin kränkelt gerade jeder 8. ob der saisonal grassierenden Erkältungs- und Grippe-Wellen. Und selbstverständlich hat es auch den Autor dieser Zeilen erwischt. Den ganzen Artikel lesen »

fontstruct

neues
27. Januar 2009

Nach einigem Zögern habe ich mich bei fontstruct angemeldet. Ziel dieser Aktion ist es, nicht weniger als eine eigene Hausschrift zu erstellen. Mangels Erfahrung auf dem Gebiet des Schriftentwurfs dürfte das einige Zeit in Anspruch nehmen…

http://fontstruct.fontshop.com

http://fontstruct.fontshop.com

© 2009 maakfischer

alle rechte vorbehalten • kontaktimpressumseitenanfang ↑