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

【问题标题】：Angular UI-Bootstrap carousel not working in a latest version 2.5.0Angular UI-Bootstrap 轮播在最新版本 2.5.0 中不起作用
【发布时间】：2019-10-14 17:52:13
【问题描述】：

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

请看下面的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" 轮播不工作。

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

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

之所以不起作用，是因为新版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>

希望对你有帮助

【讨论】：

但问题是它不适合我。我正在使用 ui-bootstrap-tpls.min.js 2.5.0 版本、bootstrap.min.css、angular-animate 等等。但对我来说，只有第二张卡是有效的。如果我也点击它不会前进或后退。
是的，我以前有过，看起来图像每次都没有正确加载。如果您不断刷新页面，您最终会设置。你用的是什么浏览器？
我正在使用 chrome