如何将变量传递给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属性内部的内容，直到角度出现以替换它。如果你有一个字符串常量，你可以在src="'myurl.html'"中使用单引号，但是如果你有一个需要用angular绑定的值，你必须使用ng-src和{{的表达式语法1}}

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

但是，如果{{ }}标记是该文件中唯一的标记，那么我只是执行此操作而不是文件：

img

由于你在重复内部，它已被包含在内，使<div ng-repeat="item in items"> <img ng-src="item.image" /> </div> 变得多余。

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}}">