Error: [$parse:syntax] when using ng-class

Question

I have been following a pluralsight course called Creating Apps with Angular, Node and Token Authentication, and am writing my own custom alert messaging.

Basically, what I want to do, is to add different CSS classes depending on the state of the alert message.

When I load my app, I get the following error in the console:

Error: [$parse:syntax] Syntax Error: Token '}' is unexpected, expecting [:] at column 83 of the expression [{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden:!alert.hasBeenShown'}] starting at [}]

I don't understand, since I'm pretty sure my syntax is correct. Can anybody point out what I'm doing wrong?

My html:

<div class="container" ng-cloak>
    <div ui-view></div>
    <div class="alert alert-{{alert.type}} animated main-alert" ng-class="{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden:!alert.hasBeenShown'}"><strong>{{ alert.title }}</strong>
      {{ alert.message }}
    </div>
  </div>

If you need more details, please ask, or check the Github repo. The relevant files are index.html in the root folder, register.js under app/scripts/controllers and alert.js under app/scripts/services.

Thanks for the help.

MakG · Accepted Answer · 2016-02-27 08:40:49Z

3

Change this:

'alert-hidden:!alert.hasBeenShown'

to this:

'alert-hidden':!alert.hasBeenShown

You missed a closing single-quote in property name.

answered Feb 27, 2016 at 8:40

MakG

1,2749 silver badges14 bronze badges

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

1 Comment

Miha Šušteršič Over a year ago

Thanks a lot, fixed it :)

Collectives™ on Stack Overflow

Error: [$parse:syntax] when using ng-class

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related