阅读角度ui bootstrap轮播上的活动幻灯片#

时间:2014-11-03 00:52:53

标签: javascript jquery angularjs twitter-bootstrap

我正在使用Angular Bootstrap carousel ui我需要使用轮播作为图像选择器,但我找不到绑定到所选$ index的方法。有没有办法做到这一点,即使是一个黑客的方式?

Here's a plunkr to mess with

我尝试在ng-click=($index)标记上放置一个<slide>但是在滑块控件下面,所以当滑动转盘时它不会触发。

<carousel interval="carouselInterval" class="no-animate" >
    <slide ng-repeat="slide in token.images | eligibleWidth:200"
           class="no-animate" ng-click="slideSelect($index)"> <!-- doesn't fire cuz under controls -->
        <img ng-src="{{slide.src}}" style="margin:auto;">

        <div class="carousel-caption">
            <h4>{{$index+1}} of {{(token.images | eligibleWidth:200).length}}</h4>

            <p >{{slide.caption}}</p>
        </div>
    </slide>
</carousel>

1 个答案:

答案 0 :(得分:2)

以一种黑客的方式。使用onclick触发角度范围功能。

<slide onclick="angular.element(this).scope().clickItem(this)" data-index="{{$index}}" >
   ...
<slide>

在控制器中:

$scope.clickItem = function(target){
    var ele = angular.element(target);
    var index = ele.attr('data-index');
};

这是PLUNKER DEMO LINK

希望这可行。