Angular UI Bootstrap 轮播和标签在同一页面时发生冲突
Angular UI Bootstrap Carousel and Tabs collision when they are on same page
我正在使用 angular UI Bootstrap 作为 angularjs 项目。我有一个包含 Carousel 和 Tabs 的页面(两者都在同一页面上)。
问题是,每当我单击选项卡时,选项卡都会相对于旋转木马幻灯片进行切换,并且旋转木马幻灯片会移动。
如果有任何方法可以防止这种情况,请帮助我。
非常感谢。
查看:
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
<div style="background-color:green;color:white;height:50px;width:100%">
<h1>Some other content</h1>
</div>
<br><br>
<uib-tabset active="active">
<uib-tab heading="Tab One"><h1>Tab 1 content</h1></uib-tab>
<uib-tab heading="Tab Two" classes="btn-sm"><h2>Tab 2 content</h2></uib-tab>
<uib-tab heading="Tab Three"><h1>Tab 3 content</h1></uib-tab>
<uib-tab heading="Tab Four" classes="btn-sm"><h2>Tab 4 content</h2></uib-tab>
</uib-tabset>
</div>
控制器:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: 'http://lorempixel.com/' + newWidth + '/300',
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
id: currIndex++
});
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
// Randomize logic below
function assignNewIndexesToSlides(indexes) {
for (var i = 0, l = slides.length; i < l; i++) {
slides[i].id = indexes.pop();
}
}
function generateIndexesArray() {
var indexes = [];
for (var i = 0; i < currIndex; ++i) {
indexes[i] = i;
}
return shuffle(indexes);
}
//
function shuffle(array) {
var tmp, current, top = array.length;
if (top) {
while (--top) {
current = Math.floor(Math.random() * (top + 1));
tmp = array[current];
array[current] = array[top];
array[top] = tmp;
}
}
return array;
}
});
只需更改 active 属性并为每个组件放置唯一的属性,例如
<uib-carousel active="activeCarousel"
....
<uib-tabset active="activeTab">
$scope.activeTab = 0;
$scope.activeCarousel = 0;
干杯
我正在使用 angular UI Bootstrap 作为 angularjs 项目。我有一个包含 Carousel 和 Tabs 的页面(两者都在同一页面上)。
问题是,每当我单击选项卡时,选项卡都会相对于旋转木马幻灯片进行切换,并且旋转木马幻灯片会移动。
如果有任何方法可以防止这种情况,请帮助我。
非常感谢。
查看:
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
<div style="background-color:green;color:white;height:50px;width:100%">
<h1>Some other content</h1>
</div>
<br><br>
<uib-tabset active="active">
<uib-tab heading="Tab One"><h1>Tab 1 content</h1></uib-tab>
<uib-tab heading="Tab Two" classes="btn-sm"><h2>Tab 2 content</h2></uib-tab>
<uib-tab heading="Tab Three"><h1>Tab 3 content</h1></uib-tab>
<uib-tab heading="Tab Four" classes="btn-sm"><h2>Tab 4 content</h2></uib-tab>
</uib-tabset>
</div>
控制器:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: 'http://lorempixel.com/' + newWidth + '/300',
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
id: currIndex++
});
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
// Randomize logic below
function assignNewIndexesToSlides(indexes) {
for (var i = 0, l = slides.length; i < l; i++) {
slides[i].id = indexes.pop();
}
}
function generateIndexesArray() {
var indexes = [];
for (var i = 0; i < currIndex; ++i) {
indexes[i] = i;
}
return shuffle(indexes);
}
//
function shuffle(array) {
var tmp, current, top = array.length;
if (top) {
while (--top) {
current = Math.floor(Math.random() * (top + 1));
tmp = array[current];
array[current] = array[top];
array[top] = tmp;
}
}
return array;
}
});
只需更改 active 属性并为每个组件放置唯一的属性,例如
<uib-carousel active="activeCarousel"
....
<uib-tabset active="activeTab">
$scope.activeTab = 0;
$scope.activeCarousel = 0;
干杯