Question

有什么方法可以知道当前的活动幻灯片是什么？

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>

我不确定我是否需要添加手表？

请将此视为一个单独的问题：

您可以从我的代码中看到幻灯片中有2个图表信息。但当它呈现/滑动时，第二个单独被挤压宽度。

换句话说，有什么方法可以在渲染时自动缩放高图？

是否有任何解决方法。

Answer 1

<强>更新：

实际上，angular-ui允许您在active指令上设置slide属性，当幻灯片变为活动状态时，该属性将设置为true。

在此示例中：幻灯片处于活动状态时，slide.active将设置为true。

<carousel> 
    <slide ng-repeat="slide in slides" active="slide.active"> 
        <highchart id="chart{{$index}}" config="slide.chartConfig"></highchart> 
    </slide> 
</carousel>

<强>控制器

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];
};

有was an issue将此信息添加到slide事件中，但他们决定不这样做。

但是有一些解决方法：

Answer 2

我已经能够使用以下jQuery代码获取轮播幻灯片的当前索引（轮播HTML必须包含id="myCarousel"）：

$('#myCarousel .active').index();

我用它来向旋转木马添加ng-swipe-left / right并且它可以工作（如果你有兴趣，请在这里完整回答控制器js代码：angular ui.bootstrap.carousel call next()/prev() from $scope）

适用于bootstrap 3.0.2

Bootstrap AngularJS轮播 - 如何知道活动的幻灯片对象

2 个答案: