AngularJS - HTML in JS - Escaping single quote

Question

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 1

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.

Answer 2

I had a similar problem, but I was trying to escape single quotes in html. I ended up solving it by using a double backslash:

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