ng-repeat与ng-include不起作用

时间:2014-01-05 04:18:06

标签: angularjs angularjs-ng-repeat angularjs-ng-include

我正在尝试使用包含ng-repeat的{​​{1}}。问题是ng-repeat中的第一个元素只是ng-include模板,没有填充ng-include的数据。有没有办法可以以某种方式绑定{{1}中的模板1}}所以它适用于第一个ng-repeat

ng-include

例如,如果我的ng-repeat包含10个项目,则呈现的第一个项目将只是空模板。第2-10项将按原样呈现。我做错了什么?

3 个答案:

答案 0 :(得分:26)

首先确保第一个项目索引中包含的数据实际上具有您想要的数据。

问题的一个可能解决方案是简单地不显示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>

见示例:

http://plnkr.co/edit/Yvd73HiFS8dXvpvpEeFu?p=preview


另一种可能的解决方法只是为了衡量标准:

使用组件:

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

答案 1 :(得分: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问题在指令和服务中有一些很好的模板缓存示例:

Using $http and $templateCache from within a directive doesn't return results

答案 2 :(得分:1)

使用适用于我的指令:https://stackoverflow.com/a/24673257/188926

在你的情况下:

1)定义一个指令:

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

2)使用你的新指令:

<mytemplate />

...或者如果你对{* 3}}进行HTML验证:

<div mytemplate></div>