不能在引号内使用角度值

Why does this not work:

为什么这不起作用:

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

But this does work:

但这确实有效:

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

In the top example, the mnuClick() routine never gets called, but in the bottom example, it does. When I do an 'inspect element' everything looks fine.

在上面的示例中,mnuClick()例程永远不会被调用,但在底部的示例中,它确实被调用。当我做“检查元素”时,一切看起来都很好。

3 个解决方案

#1

It does not work, because the way you did it you are saying that you want to provide the string {{choice}} to the mnuClick function.

它不起作用,因为你这样做的方式是你想要为mnuClick函数提供字符串{{choice}}。

When providing xxx, this is actually correct, hence you need the quotes here.

提供xxx时,这实际上是正确的,因此您需要这里的引号。

But when using {{choice}}, you don't want THAT string, but you want that expression to be evaluated and its result (which is probably a string) as a parameter - hence you don't need the quotes (and not even the curly braces) here.

但是当使用{{choice}}时,你不需要那个字符串,但你想要评估该表达式并将其结果(可能是一个字符串)作为参数 - 因此你不需要引号(而不是在这里,甚至是花括号。

So just write

所以写吧

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

and you're fine :-).

而你很好:-)。

To cut it short: In one case you deal with an expression which resolves to a string, in the other case you deal with a string directly. Hence one time you don't need quotes, the other time you do.

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

If you want more detailed information on when to use curly braces and when not, check out this answer to this question: Difference between double and single curly brace in angular JS?

如果您想了解何时使用花括号的更详细信息,何时需要更多详细信息,请查看此问题的答案:角度JS中双重和单花括号之间的区别?

Hope this helps.

希望这可以帮助。

PS: Inside the text of your a tag, you need the double curly-braces, as you're not in a AngularJS controlled code-block here - hence you have to mark it as binding, otherwise it'd just be text inside of HTML.

PS:在你的标签文本中,你需要双花括号,因为你不在这里的AngularJS控制的代码块中 - 因此你必须将它标记为绑定,否则它只是文本内部HTML。

#2

The value of ng-click is interpreted as an angular expression so you don't have to use the curly brackets around "choice". Just write it like this:

ng-click的值被解释为角度表达式,因此您不必使用“choice”周围的花括号。就像这样写:

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

#3

Doesn't this work?

这不行吗?

ng-click="mnuClick(choice)"

I've definitely done something along those lines plenty of times, but don't have code to hand to verify...

我肯定已经做了很多次这样的事情,但是没有代码可以用来验证......

#1