javascript - 如何将变量传递给 ng-include？

Question

我有以下代码：

<div ng-repeat="item in items">
  <div ng-include src="itemG.html"></div>
</div>

然后在 itemG.html 我有：

<img src="{{item.image}}">

如何让我的 ng-repeat 打印出所有图像？

Answer 1

代码中有两个潜在问题...

src="itemG.html"需要一对额外的单引号，如下所示：

<div ng-repeat="item in items">
  <div ng-include="'itemG.html'"></div>
</div>

并且img标签缺少结束语"：

<img ng-src="{{item.image}}">

Plunker：http ://plnkr.co/edit/7IUs7WPdUYkfVVKtBN1m?p=preview

Answer 2

基本上，这归结为浏览器将逐字解释 src 属性中的内容，直到 angular 出现替换它。如果你有一个字符串常量，你可以在里面使用单引号src="'myurl.html'"，但是如果你有一个值需要被 angular 绑定，你必须使用ng-src和表达式语法{{ }}

您还需要将模型绑定到您的模板文件本身。如果没有 ng-include 事件指令或它自己的模型/控制器/指令的帮助，它不会从中继器中获取绑定。有太多不同的方法可以证明这一点，而且它也与模板文件中的标记有关，我不能说。

但是，如果img标签是该文件中唯一的东西，那么我会这样做而不是文件：

<div ng-repeat="item in items">
  <img ng-src="item.image" />
</div>

由于您在重复中，因此它已经被包含在内，因此变得ng-include多余。

Answer 3

主要代码

<div ng-repeat="item in items">
  <ng-include src="itemG.html" ng-controller="MyCtrl" ng-init="i=item"><ng-include>
</div>

然后在 itemG.html 我有：

<img src="{{i.image}}">