Question

我是Angular开发的新手。我有一个从远程服务器检索的图像列表，需要在两个不同的图像轮播中显示。目前，我的设置如下：

<div ng-controller="MainCtrl"> 
   <div ng-controller="CarouselCtrl"></div>
   <div ng-controller="CarouselCtrl"></div>
</div>

在MainCtrl的范围内检索并存储数据，然后在两个图像轮播中使用。但最终将两个旋转木马连接在一起，以便一方的任何操作都反映在另一方上。

解决此问题的最佳和正确方法是什么，因此两个轮播可以使用相同的基础数据集，但是它们之间的相互作用并没有联系在一起？

编辑：我忘记了可以设置/定义参数的松散方式。两个轮播都使用相同的参数（.active）来确定它们的活动幻灯片。所以，当一个人改变了.active，另一个人反映了这一变化。将它们更改为.activeA和.activeB以我需要它们的方式去链接。

Answer 1

原因是两个Carousels都绑定到相同的$ scope.kittens属性，这是双向数据绑定，更改索引的一个，将更改另一个，解决方案是创建一个带有隔离的指令将创建一个具有它的轮播的范围是自己的独立范围，或者如果你想保持简单，构造另一个范围属性（kittens2），它是第一个属性的副本：

$scope.kittens2 = angular.copy($scope.kittens);

这将创建一个新的scope属性，该属性不是与第一个绑定的数据，然后，在第二个轮播中更改ng repeat以迭代到现在具有自己范围的新scope属性。

 <slide ng-repeat="kitten in kittens2" active="kitten.active">

这样你就可以分离范围了，这个解决方案就是保持示例简单，但正确的方法是使用带有隔离范围的指令。

请注意：

$scope.kittens2 = $scope.kittens

将无效，因为您再次使用kittens属性绑定kittens2属性，angular.copy将旧对象复制到具有不同引用的新对象。