AngularJS引导程序的轮播不起作用

Question

已解决：这是带有正确代码的 codepen 链接：Codepen

我的 angular bootstrap carousel 静态显示图像而没有“滑动”，有人知道为什么吗？

这是我的设置：

HOME.HTML：

<div id="slides_control">
 <div>
  <carousel interval="myInterval">
   <slide ng-repeat="slide in slides" active="slide.active">
    <img ng-src="{{slide.image}}">
   </slide>
  </carousel>
 </div>
</div>

APP.JS

angular.module('lbda', ['ngRoute', 'ui.bootstrap', 'lbda.controllers']).
 config(['$routeProvider',
  function($routeProvider) {
   $routeProvider.
    when('/home', {
     templateUrl: 'views/home.html',
     controller: 'CarouselCtrl'
   }).
   otherwise({
    redirectTo: ('/home')
   });
  }
 ]);

CAROUSEL.JS

angular.module('lbda.controllers').
  controller('CarouselCtrl', function ($scope) {
    $scope.active = 0;
    $scope.myInterval = 2000;
    $scope.slides = [
      {image: '../../images/carousel/1.jpg'},
      {image: '../../images/carousel/2.jpg'}
    ];
  })

Answer 1

在ng-repeat 下方，您需要箭头的锚链接：

<a class="left carousel-control" 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" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

您的轮播还需要一个id：#myCarousel。