I have an Angular template which is supposed to show a Bootstrap Carousel on a page but nothing is showing up. I've added the example code from the Bootstrap website underneath and that code works fine. Here is the code:
Angular Component
( function( $ ) {
'use strict';
angular
.module( 'mct' )
.component( 'mctCarousel', {
templateUrl: 'components/mct-carousel/mct-carousel.tmpl',
bindings: {
uid: '@',
options: '<',
},
controller: CarouselController,
});
function CarouselController() {
var ctrl = this;
$( '#carousel-example-generic' ).carousel();
ctrl.$onInit = function() {
$( '#' + ctrl.uid ).carousel();
};
ctrl.slide = function( dir ) {
console.log( ctrl.uid );
$( '#' + ctrl.uid ).carousel( dir );
};
}
})( jQuery );
Angular Component Template
<div id="{{:: $ctrl.uid }}" ng-if="$ctrl.options.slides.length" ng-class="{'size-{{:: $ctrl.options.size }}':$ctrl.options.size !== 'default','carousel-fade':$ctrl.options.transition_type === 'fade'}" ng-style="$ctrl.options.image_upload_url && {'background-image':'url('+$ctrl.options.image_upload_url+')'}" class="carousel slide" data-interval="{{:: $ctrl.options.transition_delay }}">
<ol ng-if="$ctrl.options.slides.length > 1" class="carousel-indicators hidden-sm hidden-xs">
<li ng-repeat="(index, slide) in $ctrl.options.slides" data-target="#{{:: $ctrl.uid }}" data-slide-to="{{:: index }}" ng-class="{'active':index == 0}"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div ng-repeat="(index, slide) in $ctrl.options.slides" class="item halign-{{:: slide.blurb.horizontal_alignment }} valign-{{:: slide.blurb.vertical_alignment }}" ng-class="{'active':index == 0,'type-{{:: slide.blurb.type }}':slide.type !== 'default'}" ng-style="slide.image_upload_url && {'background-image':'url('+slide.image_upload_url+')'}">
<a ng-if="slide.link" href="{{:: slide.link }}" target="{{:: slide.link_target }}" class="block-link"></a>
<div ng-if="slide.blurb.enabled" class="container">
<div class="blurb">
<h2 ng-if="slide.blurb.title" style="color:{{:: slide.blurb.title_color }}">{{:: slide.blurb.title }}</h2>
<p ng-if="slide.blurb.description" style="color:{{:: slide.blurb.description_color }}">{{:: slide.blurb.description }}</p>
<a ng-if="slide.blurb.button_link" href="{{:: slide.blurb.button_link }}" target="{{:: slide.link_target }}" class="btn">{{:: slide.blurb.button_label || "Click Here" }}</a>
</div>
</div>
</div>
</div>
<span ng-if="$ctrl.options.slides.length > 1" class="left carousel-control hidden-md hidden-lg" ng-click="$ctrl.slide('prev')" role="button" data-target="#{{:: $ctrl.uid }}" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</span>
<span ng-if="$ctrl.options.slides.length > 1" class="right carousel-control hidden-md hidden-lg" ng-click="$ctrl.slide('next')" role="button" data-target="#{{:: $ctrl.uid }}" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</span>
</div>
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image:url('/carousel/hero_image_2.jpg');">
<div class="carousel-caption">
...
</div>
</div>
<div class="item" style="background-image:url('/carousel/picjumbo_2.jpg');">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
This is the result: There are 2 carousel's (one on top of the other). But the first one is not being initialized correctly. I have a feeling it has to do with the fact that the first one has all the Angular logic and it must interfere with Bootstrap initializing it correctly.
I was able to figure this out by adding angular code to the generic example line by line until I finally broke the generic.
The problem is stated in the Angular 1.5.7 docs ( https://docs.angularjs.org/guide/interpolation - "Dynamically Changing an interpolated value").
Basically I can't have halign-{{:: slide.blurb.horizontal_alignment }} valign-{{:: slide.blurb.vertical_alignment }}
in my class attribute since I'm using ng-class
Once I remove the interpolated value's from the class attribute, everything started working properly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.