javascript - 不能在引号内使用 Angular 值

Question

为什么这不起作用:

<ul class="dropdown-menu">
  <li ng-repeat="choice in dropDownItems">
    <a class="btn" ng-click="mnuClick('{{choice}}')">{{choice}}</a>
  </li>
</ul>

但这确实有效:

<ul class="dropdown-menu">
  <li ng-repeat="choice in dropDownItems">
    <a class="btn" ng-click="mnuClick('xxx')">{{choice}}</a>
  </li>
</ul>

在上面的例子中，mnuClick() 例程永远不会被调用，但在下面的例子中，它会被调用。当我执行“检查元素”时，一切看起来都很好。

Answer 1

它不起作用，因为您这样做的方式是说您要将字符串 {{choice}} 提供给 mnuClick 函数。

当提供 xxx 时，这实际上是正确的，因此您需要在此处使用引号。

但是在使用 {{choice}} 时，您不需要 THAT 字符串，而是希望计算该表达式及其结果(可能是string) 作为参数 - 因此您在这里不需要引号(甚至不需要花括号)。

所以就这么写

<a class="btn" ng-click="mnuClick(choice)">{{choice}}</a>

你很好 :-).

简而言之:在一种情况下，您处理一个解析为字符串的表达式，在另一种情况下，您直接处理一个字符串。因此，有一次您不需要引号，而另一次则需要。

如果您想了解有关何时使用花括号的更多详细信息，请查看 this answer这个问题:Difference between double and single curly brace in angular JS?

希望这对您有所帮助。

PS:在 a 标签的文本中，您需要双花括号，因为您不在 AngularJS 控制的代码块中 - 因此您必须将其标记为绑定(bind)，否则它只是 HTML 中的文本。