Question

我有以下代码，效果很好

<div ng-repeat="item in items">
   <ng-include src="itemView.html">
   <!-- ngincluded view "itemView.html" -->
     {{item.title}}
</div>

我现在想在我的应用中的其他地方使用itemView.html，不在ngRepeat 中。

这样做的最佳方式是什么？

我意识到一个选项是创建一个新的范围数组变量var singleItem=[myItem]，并在其周围放置一个<div ng-repeat="item in singleItem">，但是有更多的角度方法吗？

Answer 1

由于您的商品详情是itemView.html模板的一部分，因此它是独立的。因此，它可以在您的应用程序中的任要使您可以独立于变量名称项重复使用模板，可以将其包装在如下的指令中：

module.directive('reusableItem', function() {
return {
  restrict: 'E',
  scope: {
    myItem: '=item'
  },
  templateUrl: 'itemView.html'
};

}）;

将所有项目引用替换为itemView.html中的myItem。

它将像这样使用：＆lt; reusable-item my-item =“item”＆gt;＆lt; / reusable-item＆gt; 为你的情况。

同一指令的第二次使用可能如下所示：＆lt; reusable-item my-item =“itemXyz”＆gt;＆lt; / reusable-item＆gt;

如果要在多个地方使用模板，您还要做的就是缓存模板。为此，您可以使用$templateCache。

Answer 2

您可以使用ng-init。

主要的HTML：

    <!-- use it with ng-repeat  -->
<div ng-repeat="item in items">
    <div ng-include src="template.url" onload='myFunction()'></div>
</div>

<!-- using anywhere else in your code ng-init="item=item[index]"  -->
<div ng-init="item=items[1]" ng-include src="template.url" onload='myFunction()'></div>

<!-- template -->
<script type="text/ng-template" id="template1.html">
   {{item.title}}
</script>

什么是在ngRepeat之外设置ng重复迭代器的最佳方法

2 个答案: