Question

我对不同指令的不同行为感到困惑。在下面的代码ng-repeat中，只需要一个字符串，但ng-source需要image作为表达式。有人可以解释一下吗？

<ul>
       <li ng-repeat = "image in product.images" >
                <img ng-src="{{image}}" />
       </li>
</ul>

澄清更多：为什么ng-repeat的语法不像：

ng-repeat = "{{image in product.images}}"

Answer 1

这一切都在动态行为中。当您使用ng-repeat时，您正在迭代预定义的集合。没有什么动态的。变量本身的值可以是动态的，但您可以放心，您将迭代相同的变量（或类似[1,2,3,4]的内联数组）。

但是当您使用ng-src时，您正在为该图像传递一些动态路径。然后Angular将在解析src的值时添加{{image}}属性。

您应该查看我们如何传递ng-include的参数。 <div ng-include="template.url"></div>。这里template.url 不是实际路径，正如您期望src所拥有的那样。而是使用变量。如果您想要传递确切路径，可以将其包含在'中，并将精确路径作为字符串。 e.g：

<div class="slide-animate" ng-include="template_path+'template1.html'"></div>。

注意'template1.html'用单引号括起来表示字符串，而template_path是一个变量。

Answer 2

它确实是AngularJS指令的痛点之一，已在Angular 2+中得到解决：您需要仔细阅读该指令的文档（或其源代码，如果没有详细记录），知道指令的期望。

通常，当要传递的值是字符串（如图像URL或链接href）时，指令不希望您传递表达式，并且可以使用，直接传递静态字符串，例如，ng-src="/images/foo.png"。如果您希望值是动态的，例如范围变量的值，则使用插值：ng-src="{{ imagePath }}"。

如果指令需要非字符串值（如布尔值或对象，或者像ng-repeat或ng-options使用的那样的特定微语法），或者指令期望值为传递总是动态的，然后你不使用插值，表达式总是动态的。请注意，在这种情况下，传递文字字符串需要以这种方式完成：foo="'static string'"。

但它总是归结为指令设计中的选择，你需要阅读文档。

对Angular中不同指令的不同行为的困惑

2 个答案: