Bootstrap Carousel未在Angular组件中初始化

Question

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 1.5.5
• Bootstrap 3.3.1

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.

Answer 1

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.