Search code examples
javascripthtmlangularjsng-class

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

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.

Solution

  • Change this:

    'alert-hidden:!alert.hasBeenShown'

    to this:

    'alert-hidden':!alert.hasBeenShown

    You missed a closing single-quote in property name.