如何將變量傳遞到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

代碼中存在2個潛在問題...

src="itemG.html"需要一對額外的單引號，如下所示：

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

而且img標簽缺少結尾" ：

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

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

Answer 2

基本上，這歸結為瀏覽器將逐字解釋src屬性中的內容，直到用角度替換它為止。 如果您具有字符串常量，則可以在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}}">