Angular UI-Bootstrap carousel not working

2019-03-03 04:02发布

站内问答 / 前端开发
1989 2 4

I want to make a carousel using angular and Bootstrap but it simply doesn't work. I can't see the carousel at all and I see angular's brackett.

In other words, my result is:

Hi {{name}} Those are your photos: Slide {{$index+1}}

This is my 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>

and this is my 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'
                     }
                   ];
});

EDIT I changed the codes above according to what the answer below says. It still doesn't work

2条回答
趁早两清
2楼-- · 2019-03-03 04:19

Problem Is in your 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>

Use This Code Instead.

查看更多
0人赞 添加讨论(0) 举报
地球回转人心会变
3楼-- · 2019-03-03 04:23

You can see a working sample in plunker link below.

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>

You are using the incorrect directives for the angular-ui.

Also, you are not defining the controller properly: 

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

UPDATE

Complete working sample, even saved as a html file on your system.

<!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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)