无法创建由 AngularJs 注入的 Bootstrap 旋转木马

Question

我正在使用 AngularJS 构建我的应用程序，我想添加一个 bootstrap 轮播，使用 angular bootstrap 元素。由于 this bug (another link)，我决定放弃 angular bootstrap 库并使用常规 bootstrap 轮播，但为其注入 angular 功能。我正在使用 ng-repeat 生成幻灯片，但由于某种原因，当页面呈现时，幻灯片一张接一张地堆叠起来。 JSfiddle here.

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

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

Answer 2

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

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>

无法创建由 AngularJs 注入的 Bootstrap 旋转木马

Unable to create Bootstrap carousel infused by AngularJs

javascript

twitter-bootstrap

angularjs

bootstrap-carousel