javascript - 无法创建由 AngularJs 注入(inject)的 Bootstrap 轮播

Question

我正在使用 AngularJS 构建我的应用程序，我想使用 Angular Bootstrap 元素添加一个 bootstrap 轮播。由于 this bug(另一个 link )，我决定放弃 Angular Bootstrap 库并使用常规的 Bootstrap 轮播，但为其注入(inject) Angular Power。我使用 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>