Sensation Sensation - 1 month ago 7
AngularJS Question

ui.bootstrap.carousel is not appearing

For some reason I am not able to see, my Carousel will not appear. My project requires slightly different implementation than what is defined here. It should work fine though, I've outlined the details below.

Clicking my button toggles

openModal
, where I specify my scope as
modal
:

openModal() {
var _this = this;
this.$uibModal.open({
animation: true,
templateUrl: 'components/directives/modals/Modal/Modal.html',
controller: 'ModalController',
controllerAs: 'modal',
size: 'lg',
}
});
}


In this controller I declare some variables in the constructor:

//Carousel Variables
this.active = 0;
this.currIndex = 0;
this.slides = [];
this.addSlide();


This calls my controller function
addSlide
:

addSlide() {
for (var i=0;i<4;i++) {
this.slides.push({
image: 'https://unsplash.it/600/300',
text: ['Getting Started', 'Awesome photograph', 'That is so cool', 'I love that'][this.slides.length % 4],
id: this.currIndex++
});
}};


HTML

<div style="height: 200px;">
<div uib-carousel active="modal.active" interval="0" no-wrap="false">
<div uib-slide ng-repeat="slide in modal.slides" index="modal.slide.id">
<img ng-src="{{modal.slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{modal.slides.id}}</h4>
<p>{{modal.slides.text}}</p>
</div>
</div>
</div>
</div>

Lex Lex
Answer

Change your markup from...

  <div uib-slide ng-repeat="slide in modal.slides" index="modal.slide.id">
    <img ng-src="{{modal.slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
      <h4>Slide {{modal.slides.id}}</h4>
      <p>{{modal.slides.text}}</p>
    </div>
  </div>

...to this...

  <div uib-slide ng-repeat="slide in modal.slides" 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>
  </div>">

By including the modal. in there you are referencing a non-existent slide property on the controller when what you really want is to reference the slide object in your ng-repeat. (You also had slides in a couple places where I think you meant slide).

Comments