重复使用不同的数据包含的模板？ [英] Repeating an included template with different data?

问题描述

我想重复使用不同的对象，一个简单的模板。该模板插入 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例如： http://plnkr.co/edit/st7pqF?p= preVIEW

Plunkr example: http://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): http://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.

这篇关于重复使用不同的数据包含的模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！