Angular UI Bootstrap Carousel и Tabs сталкиваются, когда они находятся на одной странице

Question

Я использую Angular UI Bootstrap для проекта angularjs. У меня есть страница с каруселью и вкладками (обе находятся на одной странице).

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

Пожалуйста, помогите мне, если есть какой-либо способ предотвратить это.

Плункер здесь

Большое спасибо.

Посмотреть:

<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
      <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{slide.id}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </uib-slide>
    </uib-carousel>
  </div>
  <div style="background-color:green;color:white;height:50px;width:100%">
    <h1>Some other content</h1>
  </div>
  <br><br>
  <uib-tabset active="active">
    <uib-tab heading="Tab One"><h1>Tab 1 content</h1></uib-tab>
    <uib-tab heading="Tab Two" classes="btn-sm"><h2>Tab 2 content</h2></uib-tab>
    <uib-tab heading="Tab Three"><h1>Tab 3 content</h1></uib-tab>
    <uib-tab heading="Tab Four" classes="btn-sm"><h2>Tab 4 content</h2></uib-tab>
  </uib-tabset>
</div>

контроллер:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  $scope.active = 0;
  var slides = $scope.slides = [];
  var currIndex = 0;

  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://lorempixel.com/' + newWidth + '/300',
      text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
      id: currIndex++
    });
  };

  for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }

  // Randomize logic below

  function assignNewIndexesToSlides(indexes) {
    for (var i = 0, l = slides.length; i < l; i++) {
      slides[i].id = indexes.pop();
    }
  }

  function generateIndexesArray() {
    var indexes = [];
    for (var i = 0; i < currIndex; ++i) {
      indexes[i] = i;
    }
    return shuffle(indexes);
  }

  // http://stackru.com/questions/962802#962890
  function shuffle(array) {
    var tmp, current, top = array.length;

    if (top) {
      while (--top) {
        current = Math.floor(Math.random() * (top + 1));
        tmp = array[current];
        array[current] = array[top];
        array[top] = tmp;
      }
    }

    return array;
  }
});

Answer 1

Просто измените активный атрибут и поместите уникальный для каждого компонента, например

<uib-carousel active="activeCarousel"
....
<uib-tabset active="activeTab">


  $scope.activeTab = 0;
  $scope.activeCarousel = 0;

ура