web-dev-qa-db-fra.com

AngularJS - HTML dans JS - Échappement guillemet simple

J'ai besoin de le faire en javascript, je ne peux pas le faire en html (du moins pas sans tout casser, j'espère le mettre plus tard dans le html) 

Si c'était en HTML simple, la div ressemblerait à ceci ('my-border'): 

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

Mais comme il est en javascript, toute la ligne HTML doit être entourée de guillemets simples ('My-border'): 

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

J'ai essayé ce qui suit (de cette question de stackoverflow ):

"ma-frontière"

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

\ 'ma-frontière \' 

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

'ma-frontière'

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

Mais j'obtiens Erreur de syntaxe: chaîne inattendue

Je suis nouveau dans ce groupe, j'ai donc d'abord consulté les archives sans rien trouver. Si quelqu'un pouvait m'aider ou me relier à un sujet existant, je l'apprécierais vraiment!

Merci beaucoup pour votre temps!!

Shannon:]

javascripthtmlangularjs
13
user3515863

Le seul problème que je vois dans votre code est l'accolade non terminée dans votre directive ng-class, le symbole } lui manque. Après avoir ajouté cela, le fait d'éviter les guillemets simples devrait résoudre votre problème.

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

Voir ceci Plunker à titre d'exemple.

8
ryeballar

J'ai eu un problème similaire, mais j'essayais d'échapper à des guillemets simples en HTML. J'ai fini par le résoudre en utilisant une double barre oblique inversée:

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

3
frodo2975

Vous n'êtes pas obligé de citer la classe:

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

Cela ajoutera la classe my-border à la div lorsque hasBorder aura la valeur true.

1
phylax

Ne serait pas un

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

travail?

0
chris polzer