ng-repeat与ng-include一起使用无法正常工作

Question

9

我正在尝试使用包含ng-include的ng-repeat。问题是，ng-repeat中的第一个元素只是ng-include模板，没有来自ng-repeat的任何数据填充进去。有没有办法可以绑定ng-include中的模板，使其在第一个ng-repeat上起作用？

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

例如，如果我的ng-repeat包含10个项目，则渲染的第一项将只是空模板。项目2-10将按照应有的样子进行渲染。我做错了什么？

- Chris Paterson

你不能将 ng-repeat 直接放到模板里面吗？ - daremachine

第一次迭代和其他迭代之间没有区别。查看您的内容以获取项目数组。问题可能在那里。 - Chandermani

尝试这个链接：https://dev59.com/1GzXa4cB1Zd3GeqPWbFZ - daremachine

我尝试将ng-repeat放置在包含的模板中，但是没有起作用。它只显示空模板。模板内部的ng-repeat被忽略了。 - Chris Paterson

3个回答

1

对于你的情况：

1）定义一个指令：

angular.module('myApp')
  .directive('mytemplate', function() {
    return {
      templateUrl: 'views/template.html'
    };
  });

2) 使用您的新指令：

<mytemplate />

...或者如果您关心HTML验证：

<div mytemplate></div>

- Dunc

1

我遇到了同样的问题，最终发现第一个元素在第一次ng-repeat迭代时没有被获取和编译。使用$templateCache可以解决这个问题。

你可以在脚本标签中缓存你的模板：

<script type="text/ng-template" id="templateId.html">
    <p>This is the content of the template</p>
</script>

或者在你的应用程序的运行函数中：

angular.module("app").run(function($http, $templateCache) {
    $http.get("/views/template.html", { cache: $templateCache });
});

你可以在指令中使用$templateCache，尽管它的设置有点困难。如果你的模板是动态的，我建议创建一个模板缓存服务。这个SO问题中有一些很好的指令和服务内的模板缓存示例:

- Blake Bowen

我发现$first和$last在所有重复的作用域中始终评估为true - 你认为你的问题是否与我的相关？同时$middle和$index运行正常 - 所以我正确使用了作用域变量 - 还有其他人遇到这个问题吗？ - landed

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jake Johnson · Accepted Answer

首先确保items数组的第一个索引包含你所需要的数据。

解决你的问题的一种可能方法是不显示ng-repeat的第一个索引：

<div ng-repeat="item in items" ng-show="!$first">
   <div ng-include src="'views/template.html'"></div>
</div>

这可能并没有真正解决你问题的根本，但它可能会让你的应用程序更像你期望的样子。

另一个可能的解决方案：

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

看这里的例子：

再提供一个可能的解决方案：

使用组件:

html:

<div ng-repeat="item in items">
   <my-include></my-include>
</div>

js：

angular.module("app").directive("myInclude", function() {
return {
    restrict: "E",
    templateUrl: "/views/template.html"
}
})