ui.bootstrap.carousel 没有出现

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 没有出现

ui.bootstrap.carousel is not appearing

html

javascript

angularjs

angular-ui-bootstrap