angularjs+boostrap carousel 无效

我的代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>slider show</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  
<style>
    #slides_control > div{
  height: 200px;
}
img{
  margin:auto;
  width: 400px;
}
#slides_control {
  position:absolute;
  width: 400px;
  left:50%;
  top:20px;
 margin-left:-200px;
}
</style>
</head>

<body>

<div ng-app="app">
  <div ng-controller="CarouselDemoCtrl" >
    <div>
       <carousel interval="myInterval">
      <slide ng-repeat="slide in slides">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        
      </slide>
    </carousel>
    </div>
  </div>
</div>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
    <script type="text/javascript">
        var app=angular.module('app', ['ui.bootstrap']);
        
        app.controller('CarouselDemoCtrl', function($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'
    }
  ];
})
    </script>
 
</body>
</html>

为什么就是没有出来效果呢?麻烦各位帮忙看下要怎么改进?

阅读 3.5k
2 个回答

你使用的angular版本和ui-bootstrap版本都太老了
我在官方示例里面也只找到了最老0.12.0版本的ui-bootstrap
我觉得是两个其中一个版本太老导致的
你先把angular的版本升级到1.2.16,如果不行再把ui-bootstrap升级到0.12.0

附上旧版本的0.12.0的示例
http://plnkr.co/edit/3qomZHFn...

bootstrap的css不需要引入一下?

修改一下

看了一眼官方文档

clipboard.png

怎么都感觉你的html中少了些directive。

链接:http://angular-ui.github.io/b...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进