Angularjs/Bootstrap Image Carousel中的嵌套控制器問題

我是Angular開發新手。我有一個從遠程服務器檢索的圖像列表，需要在兩個不同的圖像輪播中顯示。此刻，我有一個設置像：Angularjs/Bootstrap Image Carousel中的嵌套控制器問題

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

當數據被檢索並存儲在MainCtrl的範圍內，然後在這兩個圖像轉盤使用。但是最後兩個傳送帶連接在一起，因此一個傳送帶上的任何操作都反映在另一個傳送帶上。

什麼是解決這個問題，使相同的底層數據集可以通過傳送帶都可以使用最好的和正確的方法，但它們之間的相互作用不是綁在一起？

編輯：我忘記了參數可以設置/定義的鬆散方式。兩個輪播使用相同的參數（.active）來確定其活動幻燈片。所以當一個人改變時，另一個人反應了改變。將它們更改爲.activeA和.activeB以我需要的方式取消鏈接。

2015-09-24 D. Hall

我可以推薦UI Bootstrap嗎？ https://angular-ui.github.io/bootstrap/#/carousel –

我正在使用UI Bootstrap來做到這一點。（請參閱Plunker，這是對演示代碼的修改，證明我的問題。） –

我現在看到，thx。您是否探索過$ carousel指令以及它是如何工作的？如果它通過$ emit/$ on工作或者監聽$ scope變量更改，那麼很可能您必須修改它以使用本地進程。 –

原因是這兩個傳送帶都綁定到相同的$ scope.kittens屬性，這是雙向數據綁定，更改一個索引，會改變另一個，解決方案是或者創建一個指令與一個隔離範圍，將創建一個具有它旋轉木馬是自己單獨的範圍，或者，如果你想保持它的簡單，構造另一個scope屬性（kittens2），這是第一個屬性的副本：

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

這將創造一個新的範圍屬性與第一個範圍屬性沒有數據綁定，那麼在第二個輪播中，將ng重複更改爲迭代到現在具有其自己範圍的新範圍屬性。

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

這樣你分離範圍，這種解決方案只是爲了保持例子簡單，但正確的方法是使用具有隔離範圍指令。

需要注意的是這樣做的：

$scope.kittens2 = $scope.kittens

將無法正常工作，因爲你再次與小貓財產，angular.copy複製舊的對象用不同的參考一個新的對象綁定kittens2財產。

2015-09-24 23:55:31

回答