UI Bootstrap Carousel (с Bootstrap 2.3.2) не работает, когда скрывают и показывают в AngularJS

Question

Я пытаюсь использовать Bootstrap 2.3.2 Карусель для отображения изображений предметов. Пользователь может получить список элементов. Когда он нажимает на конкретный элемент, в одном и том же представлении отображается подробная информация. Когда пользователь снова нажмет на тот же элемент, информация будет скрыта (более или менее похожа на аккордеон, чтобы вы поняли). Часть этой подробной информации - это карусель с фотографиями предметов.

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

Однако, когда я нажимаю, чтобы скрыть детали, и нажмите, чтобы показать снова, карусель больше не работает. Я могу проверить данные, и я вижу, что информация о них есть. Однако ничего не показано.

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

Любые предложения?

UPDATE:

Мой карусельного код:

<div class="row-fluid info-section"> 
     <div class="span12"> 
      boatSelected.mainPhoto={{boatSelected.mainPhoto | json}} 
      boatPhotos={{boatPhotos | json}} 
      <img src="img/nophoto.jpg" ng-hide="boatSelected.mainPhoto"> 
      <div id="boatCarousel" class="carousel slide" ng-show="boatSelected.mainPhoto"> 
       <carousel interval="30000"> 
        <slide ng-repeat="boatPhoto in boatPhotos"> 
         <img src="//{{S3_BUCKET}}.{{PHOTO_SERVER_URL}}/img/boats/{{boatSelected.id}}/{{boatPhoto.id}}.{{boatPhoto.mime}}" style="margin:auto;"> 
        </slide> 
       </carousel> 
      </div> 
     </div> 
    </div> 

UPDATE Я должен извиниться за путаницу. Согласно комментариям коллег, я просмотрел код, и я понял, что не работаю с Bootstrap 2.3.2 Carousel, но, как вы можете видеть в приведенном выше коде, я работаю с директивой UI Bootstrap Carousel, что я уже интегрированный. Но проблема все та же. Он не работает в сценарии, описанном выше.

UPDATE 2:

I'm становится совершенно сумасшедший с этим. Я обновил плункер с помощью более подробного кода. ПРИМЕЧАНИЕ. Карусель не работает в Plunker (в моем приложении, в первый раз он работает отлично). Возможно, когда это сработает, я смогу воспроизвести проблему. Дело в том, что каждый раз, когда я нажимаю на лодку, вызываются некоторые функции в контроллере. После первого раза он больше не отображает карусель, однако данные есть.

http://plnkr.co/edit/OzZmlCNT7M5MeT5EANy5?p=preview

Answer 1

Нет JQuery (Bootstrap или другие JS) плагины не будет корректно работать с Угловым без упаковки их в директиве. Это связано с тем, что DOM срывается и воссоздается, а плагины jQuery не знают об этом, поэтому они не знают, когда запускать.

Директива решает это с помощью компилятора после компиляции, называемого «функцией связи». Вам нужно будет узнать, как создать директиву, или найти тот, который уже сделан, чтобы другие JS-плагины работали правильно. Подумайте о функции соединения аналогично функции $(document).ready() jQuery.