Ui.bootstrap.carousel没有出现

ui.bootstrap.carousel is not appearing

本文关键字：bootstrap carousel Ui      更新时间：2023-09-26

由于某些原因，我无法看到，我的旋转木马不会出现。我的项目需要的实现与这里定义的稍有不同。它应该工作得很好，我已经在下面列出了细节。

单击我的按钮切换openModal，其中我指定范围为modal:

openModal() {
    var _this = this;
    this.$uibModal.open({
      animation: true,
      templateUrl: 'components/directives/modals/Modal/Modal.html',
      controller: 'ModalController',
      controllerAs: 'modal',
      size: 'lg',
      }
    });
}
在这个控制器中，我在构造函数中声明了一些变量: 
//Carousel Variables
this.active = 0;
this.currIndex = 0;
this.slides = [];
this.addSlide();

调用我的控制器函数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>

把你的标记改成…

  <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 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>">

通过在那里包括modal.，您引用控制器上不存在的slide属性，当您真正想要的是引用ng-repeat中的slide对象时。(你也有slides在几个地方，我认为你的意思是slide)。

相关文章：