ui.bootstrap.carousel没有出现

Question

由于某种原因，我看不到我的轮播，因此无法显示。 我的项目需要的实现与此处定义的实现略有不同。 不过，它应该可以正常运行，我在下面概述了这些细节。

单击我的按钮将切换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>

Answer 1

从...更改标记

  <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. 当您真正想要的是在ng-repeat引用slide对象时，您在其中引用了控制器上不存在的slide属性。 （您在几个我认为您指slide地方也有slides ）。