16

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 :]

Improve this question

4 Answers 4

Reset to default
12

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

oh my gosh I don't know how i missed that, great catch thank you! However, i still get an Error: Invalid template
can you post a plunker with your code, it may help us track these problems.
I would like to - I'm just not sure how to. I'm very new to web-development and I'm trying to create a grid using KendoUI. The KendoUI has set fields for each column such as field, title, width, and template. Template is the HTML that will be put into a column. In my grid, I would like to have a colored border around any cells when the hasBorder field in their json response is set to true. Anyways, here's a plunker with the basic idea, i hope this helps -- plnkr.co/edit/dA3od4ZGRxarOrnwVFWl?p=preview
It's solved, thank you so much for your help ryeballar, the \' works perfectly for the my-border, I had a seperate syntax error: '<div class="col-xs-12" ng-class="{'my-border': #: hasBorder #}"><span class="gridItem">#: previousValue </span></div>' I was missing the # (kendoUI syntax), it should look like this: '<div class="col-xs-12" ng-class="{'my-border': #: hasBorder #}"><span class="gridItem">#: previousValue #</span></div>'
yes you can use the templateUrl option instead.. e.g. templateUrl: 'templates/my_row.html'
|
3

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>

Improve this answer

Comments

2

You don't have to quote the class:

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

This will add class my-border to the div when hasBorder evaluates to true.

Improve this answer

3 Comments

I got an Error: Invalid template on this one
Just out of curiosity, i went into my HTML where i use the my-border class, it looks like this: <div class="col-xs-12 my-container" ng-class="{ 'my-border': myCount > 0}"> I removed the ''s around 'my-border' from the html and ran it and got a bunch of errors, all of them matched the following: Error: [$parse:syntax] Syntax Error: Token '-' is unexpected, expecting [:]
It's true that you in general don't have to put quotes around the classNames, however when you use a dash in the className you do have you put it in quotes
0

Wouldn't a

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

work?

Improve this answer

3 Comments

it wasn't the double quotes i'm trying to escape, it's the single quotes around 'my-border' that's giving me the problem. I tried using the escape \ character on these like so: template: '<div class="col-xs-12" ng-class="{\'my-border\': hasBorder">...</div>' But no luck. Thank you for your reply though!
Jep, I just thought turning it around would be the solution... :)
Sorry, no it did not solve my problem. ryeballar's solution did solve my problem. Thank you for contributing though!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.