无法在引号内使用 Angular 值。
在AngularJS中使用ng-click指令时,有时会遇到一个问题,即在引号内无法使用Angular值。这意味着无法直接在引号内使用$scope中的变量或表达式。
例如,以下代码中的ng-click指令似乎应该可以正常工作:
ng-click="mnuClick(choice)"
我肯定曾经多次使用过类似的代码,但目前手头没有代码可以验证。
这个问题的原因是,ng-click指令中的引号内部被视为字符串,而不是Angular表达式。因此,如果我们要在引号内使用Angular的值,就会出现这个问题。
解决这个问题的方法是使用双花括号{{}}语法来包裹需要使用的Angular值。修改上述代码如下:
ng-click="mnuClick({{choice}})"
通过这种方式,我们将choice变量或表达式包裹在双花括号中,使其成为一个有效的Angular表达式。
这样,当ng-click指令触发时,Angular会解析双花括号中的表达式,并将其作为参数传递给mnuClick函数。
总结起来,无法在引号内使用Angular值的问题是因为ng-click指令中的引号被解析为字符串,而不是Angular表达式。要解决这个问题,我们可以使用双花括号语法将需要使用的Angular值包裹起来。这样,Angular会解析这些表达式,并将其作为参数传递给指定的函数。
在这个问题中,无法在引号内使用Angular值的原因是,通过在引号内使用{{choice}}
,你实际上是在告诉程序你想将字符串{{choice}}
作为mnuClick
函数的参数。但是,当使用xxx
时,这是正确的,因此你需要在这里使用引号。但是,当使用{{choice}}
时,你不想要那个字符串,而是希望该表达式被计算并将其结果(可能是一个字符串)作为参数传递 - 因此在这里不需要引号(甚至不需要花括号)。所以只需写成:
<a class="btn" ng-click="mnuClick(choice)">{{choice}}</a>
简而言之,一个情况下你处理的是一个解析为字符串的表达式,另一个情况下你直接处理的是一个字符串。因此有时不需要引号,有时需要引号。
如果你想了解更详细的关于何时使用花括号和何时不使用花括号的信息,请查看这个问题的答案:Difference between double and single curly brace in angular JS?
希望对你有所帮助。
PS:在a
标签的文本中,你需要使用双花括号,因为你不在AngularJS控制的代码块中 - 因此你必须将其标记为绑定,否则它将只是HTML中的文本。