Question

我有一个Angular模板，它应该在页面上显示一个Bootstrap Carousel，但什么都没有出现。我已经从下面的Bootstrap网站添加了示例代码，该代码工作正常。这是代码：

Angular 1.5.5
Bootstrap 3.3.1

角度组件

( 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 );

角度组件模板

<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>

这是结果：有2个旋转木马（一个在另一个的顶部）。但第一个没有正确初始化。我觉得它与第一个具有所有Angular逻辑的事实有关，它必须干扰Bootstrap正确初始化它。

Answer 1

我能够通过逐行将角度代码添加到通用示例中来解决这个问题，直到我最终破坏了通用。

问题在Angular 1.5.7 docs（https://docs.angularjs.org/guide/interpolation - ＆＃34;动态更改内插值＆＃34;）中说明。

基本上我的class属性中没有halign-{{:: slide.blurb.horizontal_alignment }} valign-{{:: slide.blurb.vertical_alignment }}因为我正在使用ng-class

从类属性中删除插值后，一切都开始正常工作。

Bootstrap Carousel未在Angular Component中初始化

1 个答案: