AngularJS 表达式在 ng-click 中引发语法错误答案

【问题标题】：AngularJS expression throwing a Syntax error in ng-clickAngularJS 表达式在 ng-click 中引发语法错误
【发布时间】：2014-04-16 06:57:12
【问题描述】：

好的，我正在开发网站的评论部分，用户可以在其中对原始帖子或任何后续帖子发表评论。为了在 angular.js 中完成这种渲染，我在递归中获得了一些乐趣。

<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>

这本身就可以完美运行。但是，我需要能够查看有关单击了哪个按钮的数据。我将我的代码更新为：

<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>

请注意添加了 ng-click。使用纯字符串在控制器中成功测试了 alertMe 方法。它仅在使用角度表达式时才会中断。

对于每条加载的评论，我都会在控制台中收到以下错误：

> 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}})">

角度网站有这样的说法：

错误：$parse:syntax 语法错误语法错误：令牌 “comment.userName”位于表达式 [{3}] 的第 {2} 列开始在 [{4}]。

有人知道是什么导致了这个错误吗？非常感谢任何和所有信息。

【问题讨论】：

标签： javascript angularjs templates

【解决方案1】：

ng-click 中不需要括号，因为它需要 表达式，而不是模板。将违规行更改为：

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

【讨论】：

效果很好！我会尽快接受答案（8分钟）我显然没有我想的那么清楚。那么由 {{}} 包围的模板是否要呈现到 DOM，而表达式只是可从 $scope 访问的变量？
@Justin 正确，在处理 DOM 时应该使用 {{}}。不要忘记投票，您可能会在the JavaScript room 找到一些美好的时光（我们是 Angular 的忠实粉丝）
感谢您的帮助！投票已完成，我将在 3 分钟内接受您的回答。