Angular UI-Bootstrap 轮播在最新版本 2.5.0 中不工作
[英]Angular UI-Bootstrap carousel not working in a latest version 2.5.0
问题描述
I am tring to achieve angular carousel.
我正在尝试实现 angular 轮播。 But it is not working in the latest version.但它不适用于最新版本。 But it is working fine in a older version.但它在旧版本中运行良好。
Please look at the following 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>
Here, the ui-bootstrap-tpls-1.2.1.js version is 1.2.1, If I use the latest version istead of this ( 2.5.0 )这里， 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 " carousel is not working. “ https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js ”轮播不工作。
Can anyone help me what change am i need to do?谁能帮我我需要做些什么改变？
1 个解决方案
解决方案1
1 已采纳 2019-10-14 09:52:13
The reason why it doesn't work is that the new version of Angular Bootstrap UI uses directives instead of components.不起作用的原因是新版本的Angular Bootstrap UI使用指令而不是组件。
Have a look at this updated Plunkr看看这个更新的Plunkr
I have changed the html code to be like:我已将 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>
Hope this helps希望这可以帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.