AngularJS ng-class expression throwing syntax error

Question

Walking through a tutorial app for use with the Ionic platform, which is built on angular 1.2.4, I've hit a confusing error in this Angular markup:

    <content has-header="true" scroll="false">
      <list>
        <item ng-repeat="project in projects" ng-click="selectProject(project)" ng-class="{active:activeProject==project}">
          {{project.title}}
        </item>
      </list>
    </content>

The error in chrome console is:

Error: [$parse:syntax] Syntax Error: Token 'itemClass' is an unexpected token
at column 33 of the expression [{active:activeProject==project} itemClass] 
starting at [itemClass].

If you change the ng-class attribute thusly (add a semicolon) :

       <item ng-repeat="project in projects" 
        ng-click="selectProject(project)" 
        ng-class="{active:activeProject==project};">

then the error goes away.

The ionic forum users are wondering why this is. I've found lots of SO posts on ng-class, and reviewed the docs, but nowhere can I find evidence that the trailing semicolon is a requirement, e.g. this post.

My best guess is that Angular is jamming (minifying) the class code together with something else and a semicolon is not being inserted automatically before javascript tries to run it; but the Angular docs say it doesn't use eval(), so it's puzzling how it fails.

Would love to know why this is happening.

Add a plunker please.

Stewie
– Stewie

2014-01-07 20:27:41 +00:00
Commented Jan 7, 2014 at 20:27 — Stewie
– Stewie, Commented Jan 7, 2014 at 20:27

Riley Lark · Accepted Answer · 2014-05-29 20:07:32Z

0

This was happening to me when my directive (item in this case) was configured with replace: true, and both the directive and the element it was replacing were using the ng-class directive. I guess angular was jamming the ng-class properties together in a way that led to a syntax error.

This could have been what was going on here, depending on the definition of the item directive.

The fix (workaround) was to set replace: false.

edited May 29, 2014 at 20:07

answered May 29, 2014 at 19:49

Riley Lark

20.9k15 gold badges86 silver badges130 bronze badges

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

Collectives™ on Stack Overflow

AngularJS ng-class expression throwing syntax error

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related