使用 ng-repeat 生成模板的副本，每个副本都有不同的数据答案

【问题标题】：Use ng-repeat to generate copies of a template and each with different data使用 ng-repeat 生成模板的副本，每个副本都有不同的数据
【发布时间】：2016-03-10 14:45:06
【问题描述】：

我正在处理一个 Angular 项目，我需要在一个名为 elements.html 的页面中创建一系列项目（称为 element.html）。根据我在 Angular 官方文档中阅读的内容，我想出了这个：

.controller('elementsController, function($http, $scope, $state){

    //each element.html needs a name and an image URl.
    $scope.elements = [
        {name:'John', image: "url_to_img"},
        {name:'Jessie', image: "url_to_img"},
        {name:'Johanna', image: "url_to_img"},
        {name:'Joy', image: "url_to_img"},
        {name:'Mary', image: "url_to_img"},
        {name:'Peter', image: "url_to_img"},
        {name:'Sebastian', image: "url_to_img"},
        {name:'Erika', image: "url_to_img"},
        {name:'Patrick', image: "url_to_img"},
        {name:'Samantha', image: "url_to_img"}
      ];
})

这是 element.html

<div>
    <h1> <!-- Name would go here --> </h1>
    <img src = <!-- image url would go here --> />
</div>

elements.html 看起来像这样：

<div ng-controller="elementsController">
    <div ng-repeat="element in elements">
      <!-- create a new element.html for each element in $scope.elements -->
    </div>
</div>

这就是我卡住的地方。这些是我的问题：

如何告诉 ng-controller 我要用于每个元素的模板是 element.html？
如何将 $scope.elements 中每个元素的数据插入到 ng-repeat 的每次迭代中？

我能想到的就是从 element.html 复制代码并将其粘贴到 ng-repeat div 中的 elements.html 中，但这似乎是一件很糟糕的事情。 elements.html 和 element.html 都位于模板目录中。任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

回答你的问题：

您可以使用 ng-include 指示 Angular 使用模板：

<div ng-include src="'elements.html'"></div>

上下文变量（元素中的元素）将被包含的模板继承，因此您可以像这样简单地引用元素：

<div> <h1>{{element.name}}</h1> <img src="{{element.image}}" /> </div>

您可以在此处找到工作示例：https://plnkr.co/edit/KCkniNJaJB2vZzLqXlCK?p=preview

【讨论】：

是的，这就是我想要的，但是 element.html 和 elements.html 都是模板目录中的独立文件。您在 plunker 上所做的只是在 elements.html 中插入来自 element 的代码。如何在 elements.html 中调用 element.html？
为了使 element.html 可以包含在 elements.html 中，您需要将 element.html 添加到 Angular 的模板缓存 (docs.angularjs.org/api/ng/service/$templateCache)。完成后，您可以像在 plunker 中一样引用它。手动管理模板缓存有点烦人，所以如果你的应用程序有一个构建系统，你的构建系统框架很可能有一个插件来为你自动化这个过程。我通常使用带有以下插件的 gulp 构建系统来自动化该过程：npmjs.com/package/gulp-angular-templatecache

【解决方案2】：

在你的 element.html 中

<div>
    <h1>{{element.name}}</h1>
    <img ng-src="{{element.image_url}}" />
</div>

在元素.html中

<div ng-controller="elementsController">
    <div ng-repeat="element in elements">
      <div ng-include="element.html"></div>
    </div>
</div>

虽然这可行，但您可能希望将其放入指令中。

【讨论】：