user3515863 user3515863 - 1 month ago 18
Javascript Question

AngularJS - HTML in JS - Escaping single quote

I need to do this in javascript, I can't do it in the html (at least not without breaking everything, I hope to put it out into the html later on).

If it was in plain html, the div would look like this ('my-border'):

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


But since it's in javascript, the whole html line needs to be surrounded in single quotes
('my-border'):

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


I've tried the following (from this stackoverflow question):

"my-border"

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>'


'my-border'

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


But I get Syntax Error: Unexpected String

I am new to this group, so I first searched the archives and didn't find anything.
If anyone could help me out or link me to an existing topic, I would really appreciate it!

Thank you so much for your time!!

Shannon :]

Answer

The only problem that I see in your code is the un-terminated curly brace in your ng-class directive, it lacks the } symbol. After adding that, escaping the single quotes should solve your problem.

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

See this Plunker as an example.