Angular UI-Bootstrap 轮播不工作答案

【问题标题】：Angular UI-Bootstrap carousel not workingAngular UI-Bootstrap 轮播不工作
【发布时间】：2017-08-16 14:53:17
【问题描述】：

我想使用 angular 和 Bootstrap 制作轮播，但它根本不起作用。我根本看不到旋转木马，我看到了 angular 的括号。

也就是说，我的结果是：

嗨 {{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'
                     }
                   ];
});

编辑我根据下面的答案更改了上面的代码。还是不行

【问题讨论】：

你从来没有真正定义过控制器。见docs.angularjs.org/guide/controller
你已经有这个例子在代码笔中工作，作为谷歌codepen.io/Fabiano/pen/LACzk的第一个结果你复制粘贴了一些地方，但它不工作
正如 str 所说，用 app.controller('CarouselDemoCtrl', CarouselDemoCtrl); 更新你的代码函数前
angular-ui.github.io/bootstrap/#/carousel 使用适当的指令
回答 N.V.Prasad，该链接正是我从中获取的。我不明白为什么它对我不起作用

标签： angularjs angular-ui-bootstrap

【解决方案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>

【讨论】：

我更改了代码（请参阅上面的问题）但它仍然不起作用
您是否遇到任何 java 脚本错误？您可以在 plunker 中复制它吗？也尝试在控制器中添加$scope.active=0。并且 ng-controller 应该设置在父 div 上才能正常工作。它之所以有效，是因为 Angular 尝试通过向上直到 rootview 来匹配该属性。
好的。我在一个 plunker 中复制它并且它可以工作......那么可能是什么问题？
可能有多种原因。您需要说明您如何处理页面，以及控制台中是否有任何错误。
我只是有一个问题：在我的脚本中我已经有了 var routingApp=angular.module('routingApp',['ngRoute']);因为我需要 ngRoute；现在我还需要 ui.bootstrap；是否可以同时定义它们？

【解决方案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>

改用此代码。

【讨论】：