While navigating through a tutorial application designed for use with the Ionic platform, which is based on angular 1.2.4, I encountered a perplexing 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 shown in the Chrome console reads as follows:
Error: [$parse:syntax] Syntax Error: Token 'itemClass' is an unexpected token
at column 33 of the expression [{active:activeProject==project} itemClass]
starting at [itemClass].
By adding a semicolon to the ng-class attribute like this:
<item ng-repeat="project in projects"
ng-click="selectProject(project)"
ng-class="{active:activeProject==project};">
the error disappears.
Members of the Ionic forum are curious about the reasoning behind this phenomenon. Despite searching various Stack Overflow posts on ng-class and reviewing documentation, there is no explicit mention that a trailing semicolon is mandatory, as seen in this post.
My hypothesis is that Angular may be compressing (minifying) the class code together with another element, resulting in the absence of an automatically inserted semicolon before the JavaScript execution takes place. However, considering that the Angular docs state it does not utilize eval(), the reason for failure remains puzzling.
I am eager to understand the root cause of this issue.