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

Community
  • 1
  • 1
user3515863
  • 163
  • 1
  • 1
  • 5

4 Answers4

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.

ryeballar
  • 29,658
  • 10
  • 65
  • 74
  • oh my gosh I don't know how i missed that, great catch thank you! However, i still get an **Error: Invalid template** – user3515863 Apr 09 '14 at 17:11
  • can you post a plunker with your code, it may help us track these problems. – ryeballar Apr 09 '14 at 17:14
  • 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 -- http://plnkr.co/edit/dA3od4ZGRxarOrnwVFWl?p=preview – user3515863 Apr 09 '14 at 17:55
  • It's solved, thank you so much for your help ryeballar, the \' works perfectly for the my-border, I had a seperate syntax error: '
    #: previousValue
    ' I was missing the # (kendoUI syntax), it should look like this: '
    #: previousValue #
    '     – user3515863 Apr 09 '14 at 18:01
  • Like i said, i'm very new to web development, at heart i'm a java programmer. Javascript syntax is still very wobbly for me, web development is a whole new world! haha I really appreciate all of your help!! Thank you again!!! – user3515863 Apr 09 '14 at 18:04
  • Just a thought - any ideas on how to separate this html out of the javascript so that it exists in a separate html file? – user3515863 Apr 09 '14 at 18:08
  • 1
    yes you can use the templateUrl option instead.. e.g. templateUrl: 'templates/my_row.html' – ryeballar Apr 10 '14 at 02:38
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>

frodo2975
  • 10,340
  • 3
  • 34
  • 41
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.

phylax
  • 2,034
  • 14
  • 13
  • I got an Error: Invalid template on this one – user3515863 Apr 09 '14 at 16:44
  • 1
    Just out of curiosity, i went into my HTML where i use the my-border class, it looks like this:
    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 [:]
     – user3515863 Apr 09 '14 at 16:52
  • 1
    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 – Michiel Mar 01 '18 at 09:34
0

Wouldn't a

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

work?

chris polzer
  • 3,219
  • 3
  • 28
  • 44
  • 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: '
    ...
    ' But no luck. Thank you for your reply though!     – user3515863 Apr 09 '14 at 16:46
  • Jep, I just thought turning it around would be the solution... :) – chris polzer Apr 09 '14 at 18:32
  • Sorry, no it did not solve my problem. ryeballar's solution did solve my problem. Thank you for contributing though! – user3515863 Apr 11 '14 at 14:57