CODEWITHSUNDEEP
angular-ui-bootstrap
NoiZeR
NoiZeR

Reputation: 135

Bootstrap ui empty carousel

I have some strange issue. I use an carousel from bootstrap ui in a modal box from bootstrap. At the beginning is init the images for the carousel. Then i click on a button to show the modal box. This time they appear correctly. But then i reinit the carouseldata (Switch to other data) and open the carousel again and then he is empty. Is there an possible solution for this?

Here you can a example of it: http://plnkr.co/edit/YASfl9nF0cxqlytFjjI0?p=preview

Click first on click me and then you see the modal box. Close the modal box and switch from data and open it again.

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myTalkModalLabel">Title</h4>
      </div>
      <div class="modal-body">
        <carousel interval="myInterval">
          <slide ng-repeat="slide in getImages()">
            <img ng-src="slide.image" />
          </slide>
        </carousel>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>



    var app = angular.module('plunker',['ui.bootstrap']);

   app.controller('MainCtrl', function($scope) {
  $scope.myInterval = 2000;
 $scope.images = ["http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4ckel17ml1bvif3lo9ki.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4c1t8t79i15qo99l1jqlj.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4davv1tplqkf24f1h4vk.jpg"];
    var images2 = ["http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4dg9gqgvt6o60l8dl.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4d59tal51dkp1ask69nm.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4e6st4vcoqii8r1vpgn.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4e184m10d46264i4buto.jpg"];

  $scope.getImages = function(){
    return $scope.images;
  }

  $scope.showModal = function(){
    $("#modal").modal("show");
  }

      $scope.showModal = function(){
            $('#modal').modal('show');
  }
    $scope.switchImages = function(){
        var temp = $scope.images;
        $scope.images = images2;
        images2 = temp;
    }



});

Upvotes: 1

Views: 644

Answers (1)

jme11
jme11

Reputation: 17387

Updated Plunker

The main issue is that you're trying to use Bootstrap's jQuery-based plugins (bootstrap.js) in your AngularJS app along with UI-Bootstrap. I swapped your modal for the UI-Bootstrap modal implementation. UI Bootstrap has no dependency on the bootstrap.js, or jQuery for that matter, so I removed both from the page <head> to avoid conflicts.

Maybe it was just a typo in the Plunker but, I also needed to fix the ng-repeat in the carousel. Where you had slide in getImages(), I removed the function and referenced $scope.images with image in images. Further, since $scope.images is an array of image urls, to access them, you just use the expression: {{image}}.

    <carousel interval="myInterval">
      <slide ng-repeat="image in images track by $index">
        <img ng-src="{{image}}" style="width: 100%;" />
      </slide>
    </carousel>

APP JS:

var app = angular.module('plunker',['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $modal) {
  var images2 = ["http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%201", "http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%202", "http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%203"];
  
  $scope.myInterval = 10000;
  $scope.images = ["http://placehold.it/500x300/e8117f/fff&text=Group%201:%20Image%201","http://placehold.it/500x300/e8117f/fff&text=Group%201:%20Image%202"];
  
  $scope.open = function (size) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        imgs: function () {
          return $scope.images;
        }
      }
    });
  };
  
  $scope.switchImages = function(){
    var temp = $scope.images;
    $scope.images = images2;
    images2 = temp;
  };
  
});

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, imgs) {
  $scope.images = imgs;
  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

MARKUP:

<button class="btn btn-primary" ng-click="open()">Launch Modal</button>
<button class="btn btn-primary" ng-click="switchImages()">Switch Image Group</button>

<script type="text/ng-template" id="myModalContent.html">
  <div class="modal-header">
    <h3 class="modal-title">Title</h3>
  </div>
  <div class="modal-body">
    <carousel interval="myInterval">
      <slide ng-repeat="image in images track by $index">
        <img ng-src="{{image}}" style="width: 100%;" />
      </slide>
    </carousel>
  </div>
  <div class="modal-footer">
    <button class="btn btn-warning" ng-click="cancel()">Close</button>
  </div>
</script>

Upvotes: 1

Related Questions