javascript - Angular : How does ng-click directory parses the expression without doubly curly brace?

Question

我有以下观点，

<li ng-repeat="img in people.images">
 <img ng-src="{{img}}" ng-click="setImage(img)">
</li>

它正在工作。但我的疑问是，属性 ng-click 应该设置为双括号内的 img，以便像 ng-src 中那样执行 ng-click= “setImage({{img}})”。如下所示，

<li ng-repeat="img in people.images">
 <img ng-src="{{img}}" ng-click="setImage({{img}})">
</li>

但后者不起作用。

此处的表达式是如何解析的以及 ng-click 与 ng-src 有何不同？

我在这里真的很困惑。非常感谢任何帮助。

Answer 1

区别如下:有些指令使用表达式，有些则不使用。这就是它们彼此“不同”的方式。您可以使用 Angular 文档来查看哪些指令使用表达式，哪些不使用表达式。

ng-click 示例:https://docs.angularjs.org/api/ng/directive/ngClick它使用一个表达式:

ng-src 示例:https://docs.angularjs.org/api/ng/directive/ngSrc它不使用表达式:

ngClick 允许您定义类似 JavaScript 的表达式，而 ngSource 允许您定义一个常用的字符串，您也可以在双大括号内定义一个表达式。根据 AngularJS 文档，双大括号内的所有内容也是一个表达式:https://docs.angularjs.org/guide/expression .

我认为“ngClick”的“Expression”和“ngSrc”的“String”之间的差异“需要”来自它们派生的原始属性:onclick和src.

属性src用于以字符串形式引用资源，而使用属性onclick时，您可以使用javascript。通常的情况是调用 onclick 中的函数，即 onclick="doSomething();"。我假设 AngularJS 使用这些属性作为基础，这就是工作流程相似的原因。 ngClick 可让您使用常用的 javascript 表达式，而 ngSrc 可让您使用字符串并根据需要添加 {{}} 表达式。

将 ngSrc 与变量一起使用(例如 ngSrc="http://localhost/{{myRessource}}")的好处是，它仅被评估在设置 $scope.myRessource 之后，而不是之前。据我所知，一旦设置了变量，它就会使用观察者模式来渲染 View 。

根据您的示例，第二个不起作用:

<li ng-repeat="img in people.images">
 <img ng-src="{{img}}" ng-click="setImage({{img}})">
</li>

由于语法错误，它不起作用。 ngClick 使用 javascript 表达式，并且 setImage({{img}}) 的语法不正确 - 您不会在 javascript 函数中对变量使用双括号。

进一步: $interpolate 和 $parse 如上所述，某些指令(例如 ngClick)使用 表达式，而其他指令(例如 ngSrc)则使用纯 Strings 与{{}}。两者在 angularJs 方面的区别如下:

• 使用表达式的指令由 angularjs 使用 $parse 进行评估(阅读 here 标题“文本和属性绑定(bind)”)
• 使用字符串的指令由 angularjs 使用 $interpolate 进行评估(阅读 here 标题“上下文”)

示例:

$scope.varOne = "asdasdasd";
var test1 = $interpolate("http://localhost/{{varOne}}");
$scope.displayOne = test1($scope);

首先，我们声明一个变量varOne。 $interpolate 返回一个需要在作用域内调用的函数，我们将其绑定(bind)到局部变量 test1。然后我们将使用 $scope 调用 test1。因此，我们将在 displayOne 上看到字符串 http://localhost/asdasdasd。

var test2 = $parse("1+5-3");
$scope.displayTwo = test2($scope);

$parse 正在评估 JavaScript 表达式，作为测试，我们可以使用计算“1+5-3”。调用test2后，结果将为3。

我准备了一个 fiddle ，所以你可以看到这个:http://jsfiddle.net/wSN54/6/

您还可以尝试在 $parse 评估中使用括号(与第二个示例中发生的情况相同):

$scope.varTwo = 2;
$scope.varThree = 3;
var test2 = $parse("{{varTwo + varThree}}");
$scope.displayTwo = test2($scope);

这必须在错误中解决，因为双大括号在通常的 JavaScript 表达式中不使用:

看看 fiddle :http://jsfiddle.net/wSN54/8/