Question

我想在我的项目中使用ui.bootstrap.carousel，html代码如下：

<div class="col-md-8">
  <div style="height: 300px">
    <div uib-carousel active="active" interval="carouselInterval" no-wrap="noWrapSlides">
      <div uib-slide ng-repeat="slide in slides">
        <img ng-src="{{slide.path}}" style="margin:auto;">
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<script type="text/javascript" src="/bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-touch/angular-touch.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

Javascript代码如下：

var anl = angular.module('anl', ['ui.router', 'ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ngTouch']);

anl.controller('HomeCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.carouselInterval = 5000;
  $scope.items = 3;

  var init = function() {
    $http.get('/api/image?category=主页图片')
        .then(function(res) {
          $scope.slides = res.data;
          console.log(res.data);
        }, function(err) {
          console.log(err);
        });
  }();
}]);

所有依赖项都是通过Bower安装的，它们都是Bower的最新版本。

现在的结果是，可以看到旋转木马的框架，这里还有一个指示器，但是没有显示所有图像，位置也是错误的，如下图所示。

Figure. 1

从图中可以看出指标可以显示5个点，Chrome的源代码也确认这里有5个图像。

Figure. 2

那么这里会发生什么？

角度自举旋转木马是一个非常奇怪的现象

0 个答案: