[英]Angular UI-Bootstrap carousel not working in a latest version 2.5.0
我正在嘗試實現 angular 輪播。 但它不適用於最新版本。 但它在舊版本中運行良好。
請看下面的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 ”輪播不工作。
誰能幫我我需要做些什么改變？
不起作用的原因是新版本的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>
希望這可以幫助
angularjs uib-tabset在ui-bootstrap 2.5.0下不起作用
[英]angularjs uib-tabset not working under ui-bootstrap 2.5.0
Angular ui-bootstrap：下拉列表不適用於版本0.13.3
[英]Angular ui-bootstrap: dropdown not working with version 0.13.3
rotate =“false”無法在ui-bootstrap / angular-data-grid中工作
[英]rotate=“false” not working in ui-bootstrap/angular-data-grid
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.