Ui.bootstrap.carousel没有出现
ui.bootstrap.carousel is not appearing
由于某些原因,我无法看到,我的旋转木马不会出现。我的项目需要的实现与这里定义的稍有不同。它应该工作得很好,我已经在下面列出了细节。
单击我的按钮切换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
)。
相关文章:
- 如何移除或改进:在Bootstrap Carousel上聚焦风格
- 如何触发Bootstrap Carousel's转盘指示器
- Twitter Bootstrap Carousel 在向左或向右滑动控制时不断向上移动
- Bootstrap Carousel无法使用AngularJS
- Bootstrap Carousel transition ON hover only
- Twitter Bootstrap Carousel使用Joomla及其Mootools
- 如何告诉Bootstrap Carousel转到特定索引
- Twitter Bootstrap Carousel - 如何实现连续慢速滚动
- couldn't get Bootstrap carousel to work with Ember
- UI Bootstrap Carousel(带有Bootstrap 2.3.2)在AngularJS中隐藏和显示时不工作
- 使用bootstrap-carousel.js失败
- Bootstrap Carousel幻灯片2中的第二个谷歌图表没有'不要出现
- 为什么我的Bootstrap Carousel没有从第二张幻灯片移动
- Disable Keyevents for Bootstrap Carousel
- jQuery的onclick事件不会在bootstrap carousel中触发
- Bootstrap carousel -控件不可点击,不能在ASP.net MVC 5中工作
- 在Rails 4应用程序中动态地向Bootstrap Carousel添加图像
- 如何在Firefox中传递多个选项给bootstrap carousel's可选选项对象
- Bootstrap carousel开始加载wordpress
- Ui.bootstrap.carousel没有出现