Question

我想使用angular和Bootstrap制作旋转木马，但它根本不起作用。我根本看不到旋转木马，我看到了棱角分明的支架。

换句话说，我的结果是：

嗨{{name}}这些是你的照片：幻灯片{{$ index + 1}}

这是我的index.html

<!doctype html>
<html ng-app="app">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div>
        Write your name here <input type="text" ng-model="name">
        Hi {{name}} Those are your photos:  
        <div ng-controller="CarouselDemoCtrl" id="slides_control">
            <div>
                <uib-carousel interval="myInterval">
                    <uib-slide ng-repeat="slide in slides" active="active" index="$index">
                        <img ng-src="{{slide.image}}" style="margin:auto;">
                        <div class="carousel-caption">
                            <h4>Slide {{$index+1}}</h4>
                        </div>
                    </uib-slide>
                </uib-carousel>
            </div>
        </div>
    </div>  
</body>
</html>

这是我的javascript script.js

var myApp = angular.module('app', ['ui.bootstrap']);
myApp.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
    $scope.myInterval = 3000;
    $scope.slides = [
                     {
                       image: 'http://lorempixel.com/400/200/'
                     },
                     {
                       image: 'http://lorempixel.com/400/200/food'
                     },
                     {
                       image: 'http://lorempixel.com/400/200/sports'
                     },
                     {
                       image: 'http://lorempixel.com/400/200/people'
                     }
                   ];
});

编辑我根据下面的答案更改了上面的代码。它仍然无法正常工作

Answer 1

您可以在下面的plunker链接中看到一个工作样本。

Plunker

<uib-carousel interval="myInterval">
    <uib-slide ng-repeat="slide in slides" active="active" index="$index">
         <img ng-src="{{slide.image}}" style="margin:auto;">
          <div class="carousel-caption">
               <h4>Slide {{$index+1}}</h4>
          </div>
    </uib-slide>
</uib-carousel>

您正在使用angular-ui的错误指令。

此外，您没有正确定义控制器：

var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);

<强>更新

完整的工作样本，甚至保存为系统上的html文件。

<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">    
<script type="text/javascript">
var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);

function CarouselDemoCtrl($scope){
  $scope.myInterval = 3000;
  $scope.noWrapSlides = false;
  $scope.activeSlide = 0;
  $scope.slides = [
    {
      image: 'http://lorempixel.com/400/200/'
    },
    {
      image: 'http://lorempixel.com/400/200/food'
    },
    {
      image: 'http://lorempixel.com/400/200/sports'
    },
    {
      image: 'http://lorempixel.com/400/200/people'
    }
  ];
}
</script>
</head>
<body>
<div>
    Write your name here <input type="text" ng-model="name">
    Hi {{name}} Those are your photos:  
    <div ng-controller="CarouselDemoCtrl" id="slides_control">
        <div>
            <uib-carousel interval="myInterval" active="activeSlide">
                <uib-slide ng-repeat="slide in slides" index="$index">
                    <img ng-src="{{slide.image}}" style="margin:auto;">
                    <div class="carousel-caption">
                        <h4>Slide {{$index+1}}</h4>
                    </div>
                </uib-slide>
            </uib-carousel>
        </div>
    </div>
</div>  
</body>
</html>

Answer 2

问题出在您的HTML中..

<div>
    Write your name here <input type="text" ng-model="name">
    Hi {{name}} Those are your photos:  
    <div ng-controller="CarouselDemoCtrl" id="slides_control">
        <div style="height:500px;">
            <div uib-carousel interval="myInterval" active="activeSlide">
                <div uib-slide ng-repeat="slide in slides" index="$index">
                    <img ng-src="{{slide.image}}" style="margin:auto;">
                    <div class="carousel-caption">
                        <h4>Slide {{$index+1}}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

请改用此代码。

Angular UI-Bootstrap轮播无法正常工作

2 个答案: