时间戳

首页 > 解决方案 > Angular UI-Bootstrap 轮播在最新版本 2.5.0 中不起作用

javascript - Angular UI-Bootstrap 轮播在最新版本 2.5.0 中不起作用

问题描述

我正在努力实现角度旋转木马。但它不适用于最新版本。但它在旧版本中运行良好。

请看下面的plunkr。

Plunkr

// Code goes here

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

function CarouselDemoCtrl($scope){
  $scope.myInterval = 3000;
  $scope.noWrapSlides = false;
  $scope.active = 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'
    }
  ];
}
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.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>

在这里，ui-bootstrap-tpls-1.2.1.js版本是 1.2.1，如果我使用最新版本而不是这个（ 2.5.0 ）

“ https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js ” 轮播不工作。

谁能帮我我需要做些什么改变？

标签： javascripthtmlcssangularjs

解决方案

不起作用的原因是新版本的 Angular Bootstrap UI 使用指令而不是组件。

看看这个更新的Plunkr

我已将 html 代码更改为：

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.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>
        <div uib-carousel interval="myInterval">
          <div 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>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

希望这可以帮助

推荐阅读