无法创建由 AngularJs 注入的 Bootstrap 轮播答案

【问题标题】：Unable to create Bootstrap carousel infused by AngularJs无法创建由 AngularJs 注入的 Bootstrap 轮播
【发布时间】：2016-03-06 12:41:09
【问题描述】：

我正在使用 AngularJS 构建我的应用程序，我想添加一个 bootstrap 轮播，使用 angular bootstrap 元素。由于this 错误（另一个link），我决定放弃angular bootstrap 库并使用常规引导轮播，但将其注入角功率。我正在使用ng-repeat 生成幻灯片，但由于某种原因，当页面呈现时，幻灯片堆叠在一起。 JSfiddlehere.

HTML：

<div ng-app="myApp" ng-controller="MainCtrl">
  <div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active" ng-repeat="slide in slides">
          <img src="{{slide.image}}" alt="Chania" width="460" height="345">
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control carControl" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control carControl" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#myCarousel").carousel({
      interval: 4000
    })
  });

  $(".carControl").click(function(e) {
    e.preventDefault();
  });

</script>

JS：

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  var slides = [{
    image: "http://static.tumblr.com/5e956872e3d338a2733c6fe3d69a940b/avddr52/UT5n3bshv/tumblr_static_peter_dinklage_as_tyrion_lannister_game_of_thrones_wallpaper.jpg",
    id: 1,
    text: "tyrion"
  }, {
    image: "http://static.independent.co.uk/s3fs-public/thumbnails/image/2015/06/15/09/jon-snow.jpg",
    id: 2,
    text: "jon snow"
  }, {
    image: "http://i.lv3.hbo.com/assets/images/series/game-of-thrones/character/s5/daenarys-1024.jpg",
    id: 3,
    text: "khalisi"
  }, {
    image: "http://vignette1.wikia.nocookie.net/gameofthrones/images/b/be/Gregor_Clegane_4x07.jpg/revision/latest?cb=20140707234843g",
    id: 4,
    text: "gregor"
  }];

  $scope.slides = slides;
});

【问题讨论】：

你能制作一个 JSBin 或 fiddle 来显示这个问题吗？
在问题描述之后有一个 JS fiddle 的链接 :) 就在 HTML 代码之上。
哦，抱歉，忽略了 :)
您需要在 ng-repeat 完成之前调用 carousel 函数。
@IkechiMichael 您能否为您的建议提供一个可行的小提琴？它对我不起作用，或者我误解了你。

标签： javascript angularjs twitter-bootstrap bootstrap-carousel

【解决方案1】：

用它代替你的 ng-repeat div

<div class="item" ng-class="{active: ($index == 0)}" ng-repeat="slide in slides">
                    <img ng-src="{{slide.image}}" alt="Chania" width="460" height="345">
                </div>

【讨论】：

【解决方案2】：

正如@Ikechi Michael 已经指出的那样，您通过为所有幻灯片提供活动类来使所有幻灯片处于活动状态，因此您需要使用 ng-class 仅使第一张幻灯片处于活动状态。这是相同的 plunkr 链接。

http://plnkr.co/edit/8fvo62X2Yn8jvwgOme8V?p=preview

<div class="item" ng-class="{'active': $index===0}" ng-repeat="slide in slides">
  <img src="{{slide.image}}" alt="Chania" width="460" height="345">
</div>

【讨论】：