Angularjs/Bootstrap映像旋转木马中的嵌套控制器问题

我不熟悉角度发展。我有一个从远程服务器检索的图像列表，需要在两个不同的图像转盘中显示。目前，我有如下设置：

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

在MainCtrl范围内检索和存储数据，然后在两个图像传送带中使用。但最终两个转盘连接在一起，这样一个转盘上的任何操作都会反映在另一个转盘上

例如：

解决这个问题的最佳和正确的方法是什么，以便两个转盘都可以使用相同的底层数据集，但它们的交互不会绑定在一起

---

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

原因是两个转盘都绑定到同一个$scope.kittens属性，这是双向数据绑定，更改其中一个的索引将更改另一个，解决方案是创建一个具有独立作用域的指令，该指令将创建一个具有自己独立作用域的旋转木马，或者，如果您希望使其保持简单，请构造另一个作为第一个属性副本的作用域属性（kittens2）：

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

这将创建一个不与第一个范围绑定数据的新范围属性，然后在第二个旋转木马中更改ng repeat以迭代到现在有自己范围的新范围属性

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

---

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

原因是两个转盘都绑定到同一个$scope。kittens属性，这是双向数据绑定，更改其中一个的索引将更改另一个，解决方案是创建一个具有独立作用域的指令，该指令将创建一个具有自己独立作用域的旋转木马，或者，如果您希望使其保持简单，请构造另一个作为第一个属性副本的作用域属性（kittens2）：

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

这将创建一个不与第一个范围绑定数据的新范围属性，然后在第二个旋转木马中更改ng repeat以迭代到现在有自己范围的新范围属性

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

---

无法工作，因为您正在将kittens2属性与kittens属性angular绑定。copy将旧对象复制到具有不同引用的新对象。

我可以推荐UI引导吗？我正在使用UI引导来实现这一点。（参见Plunker，这是演示我的问题的演示代码的修改。）我现在明白了，thx。您是否研究过$carousel指令及其工作原理？如果它通过$emit/$on运行或侦听$scope变量更改，则可能需要修改它以使用本地进程。我还没有创建完整的答案，但这正是您想要的：啊，所以您将两个旋转木马放在同一个旋转木马控制器下。我明白为什么会这样。不幸的是，我可能过于简化了我的例子。在我的完整应用程序中，一个转盘位于gmap信息窗口上，另一个位于滑出侧标签上。因此，它更像是mainCtrl->sideTabCtrl->carouselCtrl作为一个例子，而mainCtrl->mapCtrl->carouselCtrl作为第二个例子？我正在使用UI引导来实现这一点。（参见Plunker，这是演示我的问题的演示代码的修改。）我现在明白了，thx。您是否研究过$carousel指令及其工作原理？如果它通过$emit/$on运行或侦听$scope变量更改，则可能需要修改它以使用本地进程。我还没有创建完整的答案，但这正是您想要的：啊，所以您将两个旋转木马放在同一个旋转木马控制器下。我明白为什么会这样。不幸的是，我可能过于简化了我的例子。在我的完整应用程序中，一个转盘位于gmap信息窗口上，另一个位于滑出侧标签上。因此，它更像mainCtrl->sideTabCtrl->carouselCtrl作为一个，而mainCtrl->mapCtrl->carouselCtrl作为第二个。