web-dev-qa-db-ger.com

AngularJS - HTML in JS - Escapeing single quote

Ich muss dies in Javascript tun, ich kann es nicht in der HTML-Datei tun (zumindest nicht ohne alles zu zerbrechen, ich hoffe, es später in der HTML-Datei herauszugeben). 

Wenn es sich um einfache HTML-Dateien handelt, würde das div so aussehen ('my-border'): 

<div class="col-xs-12" ng-class="{'my-border': hasBorder">...</div>

Da es sich jedoch um Javascript handelt, muss die gesamte HTML-Zeile in einfache Anführungszeichen gesetzt werden ('My-border'): 

template: '<div class="col-xs-12" ng-class="{'my-border': hasBorder">...</div>'

Ich habe folgendes ausprobiert (von dieser stackoverflow-Frage ):

"meine Grenze"

template: '<div class="col-xs-12" ng-class="{"my-border": hasBorder">...</div>'

\ 'my-border \' 

template: '<div class="col-xs-12" ng-class="{\'my-border\': hasBorder">...</div>'

'meine Grenze'

template: '<div class="col-xs-12" ng-class="{&#39;my-border&#39;: hasBorder">...</div>'

Ich erhalte jedoch einen Syntax-Fehler: Unerwarteter String

Ich bin neu in dieser Gruppe, also habe ich zuerst die Archive durchsucht und nichts gefunden. Wenn jemand mir helfen könnte oder mich mit einem bestehenden Thema verlinken könnte, wäre ich sehr dankbar!

Vielen Dank für deine Zeit!!

Shannon:]

13
user3515863

Das einzige Problem, das ich in Ihrem Code sehe, ist die nicht abgeschlossene geschweifte Klammer in Ihrer ng-class-Direktive. Sie enthält das }-Symbol. Nachdem Sie das hinzugefügt haben, sollten Sie die einzelnen Anführungszeichen umgehen, um Ihr Problem zu lösen.

template: '<div class="col-xs-12" ng-class="{\'my-border\': hasBorder}">...</div>'

Sehen Sie sich diesen Plunker als Beispiel an.

8
ryeballar

Ich hatte ein ähnliches Problem, versuchte jedoch einzelne Anführungszeichen in HTML zu umgehen. Am Ende habe ich es mit einem doppelten Backslash gelöst:

<div my-directive="'Here\\'s a message with a single quote.'"></div>

3
frodo2975

Sie müssen die Klasse nicht zitieren:

<div class="col-xs-12" ng-class="{my-border: hasBorder}">...</div>

Dies fügt die Klasse my-border zum div hinzu, wenn hasBorder als wahr ausgewertet wird.

1
phylax

Wäre nicht

template: "<div class=\"col-xs-12\" ng-class=\"{'my-border': hasBorder\">...</div>"

arbeit?

0
chris polzer