您如何绑定到Angular-UI的轮播幻灯片事件? [英] How do you Bind to Angular-UI's Carousel Slide Events?
问题描述
我正在使用Angular-UI的轮播,在滑入视图后,我需要告诉Google图表重新绘制.尽管我读了什么,但似乎无法参与到该事件中.
I'm using Angular-UI's carousel and I need to tell my google charts to redraw after they have slid into view. In spite of what I've read, I can't seem to hook into the event.
看看我的尝试: http://plnkr.co/edit/Dt0wdzeimBcDlOONRiJJ?p=preview
HTML:
<carousel id="myC" interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
在文档加载时:
$('#myC').live('slid.bs.carousel', function (event) { console.log("slid"); } );
它应该像这样工作: http://jsfiddle.net/9fwuq/-非角度UI轮播
It should work something like this: http://jsfiddle.net/9fwuq/ - non-angular-ui carousel
也许我可以通过更多的Angular方法来了解我的图表已滑入视图的事实?
Perhaps there is a more Angular way to hook into the fact that my chart has slid into view?
推荐答案
我可以想到3种方法,这取决于您的要求.
There are 3 ways I can think of and that depends of your requirement.
有关示例,请参见 http://plnkr.co/edit/FnI8ZX4UQYS9mDUlrf6o?p=preview ./p>
Please see http://plnkr.co/edit/FnI8ZX4UQYS9mDUlrf6o?p=preview for examples.
-
使用$ scope.$ watch查看单个幻灯片,以检查它是否处于活动状态.
use $scope.$watch for an individual slide to check if it is become active.
$scope.$watch('slides[0].active', function (active) {
if (active) {
console.log('slide 0 is active');
}
});
使用具有自定义功能的$ scope.$ watch查找活动幻灯片.
use $scope.$watch with custom function to find an active slide.
$scope.$watch(function () {
for (var i = 0; i < slides.length; i++) {
if (slides[i].active) {
return slides[i];
}
}
}, function (currentSlide, previousSlide) {
if (currentSlide !== previousSlide) {
console.log('currentSlide:', currentSlide);
}
});
使用自定义指令来拦截轮播指令的select()函数.
use a custom directive to intercept select() function of the carousel directive.
.directive('onCarouselChange', function ($parse) {
return {
require: 'carousel',
link: function (scope, element, attrs, carouselCtrl) {
var fn = $parse(attrs.onCarouselChange);
var origSelect = carouselCtrl.select;
carouselCtrl.select = function (nextSlide, direction) {
if (nextSlide !== this.currentSlide) {
fn(scope, {
nextSlide: nextSlide,
direction: direction,
});
}
return origSelect.apply(this, arguments);
};
}
};
});
并像这样使用它:
$scope.onSlideChanged = function (nextSlide, direction) {
console.log('onSlideChanged:', direction, nextSlide);
};
并在html模板中:
and in html template:
<carousel interval="myInterval" on-carousel-change="onSlideChanged(nextSlide, direction)">
...
希望获得帮助:)
这篇关于您如何绑定到Angular-UI的轮播幻灯片事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!