Question

我正在尝试重用一个包含不同对象的简单模板。使用ng-include属性插入模板，并使用ng-init从模板中分配对象。

这曾经有用，但在升级到Angular 1.2.8之后，第二个对象实例似乎覆盖了第一个，最终得到了两个相同的实例 - 或者更准确地说，是同一个对象的两个表示。

这是一个简化的例子：

<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>

Angular控制器只提供$scope个变量：

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

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

Plunkr示例：http://plnkr.co/edit/st7pqF?p=preview

是否有更好的方法将不同的数据传递给多个模板实例？

其他调查结果

使用Plunkr，我能够快速浏览几十个Angular版本。这可能只是因为一个错误而有效。

1.0.2 - 1.1.5中的每个Angular版本都会显示第二个列表两次。 Angular 1.2.0 - 1.2.3显示两个不同的列表。版本1.2.4 - 1.2.8已恢复为重复第二个列表。

Answer 1

你需要一个指令。一开始它很吓人，但是一旦你习惯它，就会变得非常明显。

指令（死简单）：

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

HTML：

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

分叉的插件（Angular 1.2.7）：http://plnkr.co/edit/402qVL1Z5By1agG1N8Lh?p=preview

为了完整性：我不喜欢ng-init。它是HTML中的一种过程逻辑。这就是我实际上用更清洁（IMHO）解决方案绕过你的问题的原因。

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

其他调查结果

1 个答案: