Javascript 使用ng repeat生成模板的副本，每个副本具有不同的数据

我正在处理一个angular项目，我需要在一个名为elements.html的页面中创建一系列项（称为element.html）。根据我在官方文件中阅读的内容，我得出以下结论：

.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>

<div>
    <h1>{{element.name}}</h1>
    <img ng-src="{{element.image_url}}" />
</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控制器我想要用于每个元素的模板是element.html

如何将$scope.elements中每个元素的数据插入到ng repeat的每个迭代中

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

在您的element.html中

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

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

{{element.name}

在elements.html中

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

---

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

要回答您的问题：

您可以指示angular使用ng来使用模板，包括：

上下文变量（元素中的元素）将由包含的模板继承，因此您可以简单地引用元素，如下所示：

{{element.name}

---

您可以在这里找到一个工作示例：

是的，这是我想要的，但是element.html和elements.html在templates目录中都是独立的文件。您在plunker上所做的只是在elements.html中插入来自元素的代码。如何在elements.html中调用element.html？为了使element.html能够包含在elements.html中，您需要将element.html添加到angular的模板缓存（）。一旦这样做了，您就可以完全像在plunker中一样引用它。手动管理模板缓存有点烦人，因此，如果您有一个应用程序的构建系统，那么构建系统框架很可能有一个插件可以为您自动化该过程。我通常使用带有以下插件的gulp构建系统来自动化该过程：