重复使用不同的数据包含的模板？

本文介绍了重复使用不同的数据包含的模板？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想重复使用不同的对象，一个简单的模板。该模板插入 NG-包括属性，且对象均是从模板用分配NG-INIT 。

I'm trying to reuse a simple template with different objects. The template is inserted with ng-include attributes, and the objects are assigned from the template with ng-init.

这用来工作，但升级到1.2.8角后，第二个对象实例似乎覆盖第一，我结束了两个相同的实例 - 或者更precisely，二重$ P $的psentations相同的对象。

This used to work, but after upgrading to Angular 1.2.8, the second object instance seems to overwrite the first and I end up with two identical instances -- or more precisely, two representations of the same object.

下面是一个简单的例子：

Here's a simplified example:

<h3>Dogs</h3> <div ng-init="items = dogs" ng-include="'tile.html'">dogs</div> <h3>Cats</h3> <div ng-init="items = cats" ng-include="'tile.html'">cats</div>

的 tile.html 模板就是：

<ul> <li ng-repeat="i in items">{{ i }}</li> </ul>

该角器只是提供 $范围变量：

$scope.dogs = ['Beagle', 'Chihuahua', 'Poodle']; $scope.cats = ['Abyssinian', 'Bengal', 'Tabby'];

期望的行为是两个不同的列表，狗中的一个，其他的猫。相反，它现在呈现猫的两个列表。

The desired behavior is two distinct lists, one of dogs, the other of cats. Instead, it now renders two lists of cats.

Plunkr例如： plnkr.co/edit/st7pqF?p= preVIEW

Plunkr example: plnkr.co/edit/st7pqF?p=preview

有不同的数据传递到多个模板实例更好的办法？

Is there a better way of passing different data to multiple template instances?

使用Plunkr，我能够通过几十个角释放到快一步。有可能这只是工作过，因为一个错误。

Using the Plunkr, I was able to quickly step through dozens of Angular releases. It's possible this only ever worked because of a bug.

从1.0.2每个角放 - 1.1.5显示两倍的第二个列表。角1.2.0 - 1.2.3显示两个不同的列表。 1.2.4版本 - 1.2.8已经恢复到复制第二个列表

Every Angular release from 1.0.2 - 1.1.5 shows the second list twice. Angular 1.2.0 - 1.2.3 display two different lists. Versions 1.2.4 - 1.2.8 have reverted back to duplicating the second list.

推荐答案

您需要一个指令。这是恐吓在第一，但一旦你习惯了它，它变得相当明显。

You need a directive. It is intimidating at first, but once you get used to it, it becomes quite obvious.

该指令（死简单）：

app.directive("rep", function() { return { scope: { items: "=" }, templateUrl: "tile.html" }; });

中的HTML：

<div rep="" items="cats"></div>

和分叉普拉克（角1.2.7）：的http：// plnkr。 CO /编辑/ 402qVL1Z5By1agG1N8Lh？p = preVIEW

And the forked plunk (Angular 1.2.7): plnkr.co/edit/402qVL1Z5By1agG1N8Lh?p=preview

有关完整性：我不喜欢 NG-INIT 。它是一种在HTML程序逻辑。这就是为什么我居然用清洁剂（恕我直言）解决方案绕过您的问题。

For completeness: I do not like ng-init. It is kind of procedural logic in the HTML. That is why I am actually bypassing your problem with a cleaner (IMHO) solution.