AngularJS expression throwing a Syntax error in ng-click

Question

Ok, I am working on a comment section of a website where users can leave comment on the original post or any subsequent post. To accomplish this rendering in angular.js, I had some fun with recursion.

<script type="text/ng-template"  id="renderer.html">
   {{comment.userName+' - '+comment.commentText}}
   <br/><button class="standardButton">respond</button>

   <ul>
       <li ng-repeat="comment in comment.childComments | orderBy:'commentId'" ng-include="'renderer.html'"></li>
   </ul>
</script>

<ul>
    <li data-ng-repeat="comment in comments" data-ng-include="'renderer.html'"></li>
</ul>

This by itself works perfectly. However, I need to be able to see data about which button was clicked. I updated my code to this:

<script type="text/ng-template"  id="renderer.html">
{{comment.userName+' - '+comment.commentText}}
<br/><button class="standardButton" ng-click='alertMe({{comment.userName}})'>respond</button>

<ul>
    <li ng-repeat="comment in comment.childComments | orderBy:'commentId'" ng-include="'renderer.html'"></li>
</ul>

Please notice the addition of the ng-click. The alertMe method was successfully tested in the controller with plain strings. It only breaks when using angular expressions.

I get the following error in the console for every comment loaded:

> Error: [$parse:syntax]
> http://errors.angularjs.org/1.2.15/$parse/syntax?p0=comment.userName&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=11&p3=alertMe(%7B%7Bcomment.userName%7D%7D)&p4=comment.userName%7D%7D)
>     at Error (native)
>     at http://localhost:8080/Vail/jslib/angular.min.js:6:450
>     at Za.throwError (http://localhost:8080/Vail/jslib/angular.min.js:162:211)
>     at Za.consume (http://localhost:8080/Vail/jslib/angular.min.js:163:183)
>     at Za.object (http://localhost:8080/Vail/jslib/angular.min.js:170:340)
>     at Za.primary (http://localhost:8080/Vail/jslib/angular.min.js:161:358)
>     at Za.unary (http://localhost:8080/Vail/jslib/angular.min.js:168:73)
>     at Za.multiplicative (http://localhost:8080/Vail/jslib/angular.min.js:167:310)
>     at Za.additive (http://localhost:8080/Vail/jslib/angular.min.js:167:170)
>     at Za.relational (http://localhost:8080/Vail/jslib/angular.min.js:167:34) <button
> class="standardButton" ng-click="alertMe({{comment.userName}})">

The angular site has this to say:

Error: $parse:syntax Syntax Error Syntax Error: Token 'comment.userName' is at column {2} of the expression [{3}] starting at [{4}].

Does anybody know what is causing this error? Any and all information is greatly appreciated.

SomeKittens · Accepted Answer · 2014-04-15 22:53:13Z

3

You don't need brackets in ng-click, as it expects an expression, not a template. Change the offending line to:

<br/><button class="standardButton" ng-click='alertMe(comment.userName)'>respond</button>

answered Apr 15, 2014 at 22:53

SomeKittens

39.6k19 gold badges117 silver badges145 bronze badges

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

3 Comments

Justin Over a year ago

That works perfectly! I will accept the answer as soon as I can (8 minutes) I am apparently not as clear on expressions as I thought. So is a template surrounded by {{}} to be rendered to the DOM while expressions are just variables accessible from $scope?

SomeKittens Over a year ago

@Justin correct, you should be using {{}} when you'll be dealing with the DOM. Don't forget to upvote, and you might find some good times in the JavaScript room (we're big Angular fans)

Justin Over a year ago

Thanks for all of your help! Up-vote completed and I will accept your answer in 3 min.

Collectives™ on Stack Overflow

AngularJS expression throwing a Syntax error in ng-click

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related