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 as ng-click= “设置图像({{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用于引用一个资源作为字符串，而使用属性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 使用 expressions，而其他指令如 ngSrc 使用普通 Strings 结合{{}}。两者在 angularJs 端的区别如下:

• 使用表达式的指令由 angularjs 使用 $parse 求值(阅读标题“文本和属性绑定(bind)”中的 here)
• 使用字符串的指令由 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/