Вложенные контроллеры в Angularjs/Bootstrap Image Carousel Issue

Question

Я новичок в разработке углов. У меня есть список изображений, которые извлекаются с удаленного сервера и должны отображаться в двух разных каруселях изображений. На данный момент, у меня есть установка, как:

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

В случае, если данные извлекаются и сохраняются в объеме MainCtrl, затем используется в обоих изображений каруселей. Но это заканчивается тем, что две карусели связаны друг с другом, так что любые операции на одном отражаются на другом.

Plunker пример здесь: http://plnkr.co/edit/e79x0d2fF5zwx0UwXIxW?p=preview

Что является лучшим и правильным способом исправить это, так что тот же самый базовый набор данных может быть использован как каруселей, но их взаимодействия не связаны друг с другом?

Отредактировано: Я забыл о том, что параметры могут быть установлены/определены. Обе карусели использовали тот же параметр (.active), чтобы определить их активный слайд. Поэтому, когда кто-то изменил .активный, другой отразил изменение. Меняя их на .activeA и .activeB, де-связаны между собой так, как мне это нужно.

Answer 1

Причина в том, что обе карусели привязаны к одному и тому же свойству $ scope.kittens, это двухсторонняя привязка данных, изменяющая индекс одного, изменит другое, решение - это либо создать Директиву с Изолированный сфера, которая будет создавать карусель, которая имеет его собственная отдельная сфера, или если вы хотите сохранить его простым, построить еще одно свойство Scope (kittens2), который является копией первого объекта:

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

это создаст новое свойство scope, которое не привязано к данным, связанное с первым, затем во второй карусели меняет ng repeat на итерацию на новое свойство scope, которое теперь имеет свою собственную область.

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

таким образом, вы отделяете области действия, это решение просто держать пример простой, но правильный путь заключается в использовании директивы с изолированными областями.

Обратите внимание, что делает:

$scope.kittens2 = $scope.kittens 

не будет работать, потому что вы снова связыванием свойства kittens2 со свойством котят, angular.copy копирует старый объект на новый объект с другой ссылкой.