Question

由于某些原因我无法看到，我的旋转木马不会出现。我的项目需要与defined here略有不同的实现。它应该工作正常，我已经概述了下面的细节。

点击我的按钮切换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.，您在控制器上引用了一个不存在的slide属性，而您真正想要的是引用slide中的ng-repeat对象}。（在我认为你的意思是slides）的几个地方你也有slide。

ui.bootstrap.carousel没有出现

1 个答案: