twitter-bootstrap Bootstrap AngularJS 轮播 - 如何知道活动的幻灯片对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20119387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap AngularJS carousel - how to know the active slide object
提问by user3017191
Is there any way I can know what is the current active slide?
有什么办法可以知道当前的活动幻灯片是什么？
var slides = slides = [];
slides.push({text: 'Slide 1', type: "chart", chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 15, 12, 8, 7]}],
title: {text: 'Hello 1'},
loading: false
}});
slides.push({text: 'Slide 3', type: "chart", chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 35, 52, 8, 7]}],
title: {text: 'Hello 2'},
loading: false
}});
$scope.slides=slides;
<carousel>
<slide ng-repeat="slide in slides">
<highchart id="chart{{$index}}" config="slide.chartConfig"></highchart>
</slide>
</carousel>
I am not sure were i need to add watch though?
我不确定我是否需要添加手表？
Please treat this as a seperate question:
请将此视为一个单独的问题：
You can see from my code there are 2 charts information in the slide. But when its presented / slided second one alone gets squeezed in width.
您可以从我的代码中看到幻灯片中有 2 个图表信息。但是当它呈现/滑动第二个时，它的宽度会被挤压。
In other words is there any way i can auto scale the highchart at the time of rendering?
换句话说，有什么方法可以在渲染时自动缩放高图？
Is there any work around to fix it.
是否有任何解决方法来解决它。
采纳答案by musically_ut
Update:
更新：
Actually, angular-uidoes allow you to set an activeproperty on the slidedirective which will be set to true when the slide becomes active.
实际上，angular-ui确实允许您active在slide指令上设置一个属性，当幻灯片变为活动状态时，该属性将设置为 true。
In this example: slide.activewill be set to truewhen the slide is active.
在本例中：当幻灯片处于活动状态时slide.active将设置为true。
<carousel>
<slide ng-repeat="slide in slides" active="slide.active">
<highchart id="chart{{$index}}" config="slide.chartConfig"></highchart>
</slide>
</carousel>
Controller
控制器
var slides = slides = [];
slides.push({
active: false
, text: 'Slide 1'
, type: "chart"
, chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 15, 12, 8, 7]}],
title: {text: 'Hello 1'},
loading: false }
}
);
slides.push({
active: false
, text: 'Slide 3'
, type: "chart"
, chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 35, 52, 8, 7]}],
title: {text: 'Hello 2'},
loading: false }
}
);
$scope.slides=slides;
// May return `undefined` if no slide is active
// (e.g. when the carousel hasn't initialised)
$scope.getActiveSlide = function () {
return slides.filter(function (s) { return s.active; })[0];
};
There was an issueto add this information to the slideevent, but they decided not to do it.
有是一个问题，以将此信息添加到该slide事件，但他们决定不这样做。
There are some workarounds to it though:
不过有一些解决方法：
回答by EoD
I've been able to get the current index of the carousel slide with the following jQuery code (the carousel html must have the id="myCarousel"):
我已经能够使用以下 jQuery 代码获取轮播幻灯片的当前索引（轮播 html 必须具有id="myCarousel"）：
$('#myCarousel .active').index();
I used it for adding the ng-swipe-left/right to the carousel and it works (if you are interesed, full answer with the controller js code here: angular ui.bootstrap.carousel call next()/prev() from $scope)
我用它来向轮播添加 ng-swipe-left/right 并且它可以工作（如果你有兴趣，完整回答控制器 js 代码：angular ui.bootstrap.carousel call next()/prev() from $范围）
It works for bootstrap 3.0.2
它适用于引导程序 3.0.2
