你如何绑定到 Angular-UI 的 Carousel Slide Events? [英] How do you Bind to Angular-UI's Carousel Slide Events?
问题描述
我正在使用 Angular-UI 的轮播,我需要告诉我的 google 图表在它们滑入视图后重新绘制.不管我读过什么,我似乎都无法融入这个事件.
看我的尝试:http://plnkr.co/edit/Dt0wdzeimBcDlOONRiJJ?p=preview
HTML:
<slide ng-repeat="slide in slides" active="slide.active"><img ng-src="{{slide.image}}" style="margin:auto;"><div class="carousel-caption"><h4>滑动{{$index}}</h4><p>{{slide.text}}</p>
</幻灯片></轮播>
在文档加载时:
$('#myC').live('slid.bs.carousel', function (event) { console.log("slid"); } );
它应该像这样工作:http://jsfiddle.net/9fwuq/ - 非 angular-ui 轮播
也许有一种更 Angular 的方式可以了解我的图表已滑入视图这一事实?
我可以想到 3 种方法,这取决于您的要求.
有关示例,请参阅 http://plnkr.co/edit/FnI8ZX4UQYS9mDUlrf6o?p=preview.
对单个幻灯片使用 $scope.$watch 来检查它是否处于活动状态.
$scope.$watch('slides[0].active', function (active) {如果(活动){console.log('幻灯片 0 处于活动状态');}});
使用带有自定义函数的 $scope.$watch 来查找活动幻灯片.
$scope.$watch(function () {for (var i = 0; i < slides.length; i++) {如果(幻灯片 [i].active){返回幻灯片[i];}}}, 函数 (currentSlide, previousSlide) {if (currentSlide !== previousSlide) {console.log('currentSlide:', currentSlide);}});
使用自定义指令拦截 carousel 指令的 select() 函数.
.directive('onCarouselChange', function ($parse) {返回 {要求:'轮播',链接:函数(范围、元素、属性、轮播控件){var fn = $parse(attrs.onCarouselChange);var origSelect = carouselCtrl.select;carouselCtrl.select = 函数(nextSlide,方向){if (nextSlide !== this.currentSlide) {fn(范围,{nextSlide:nextSlide,方向:方向,});}返回 origSelect.apply(this, arguments);};}};});
并像这样使用它:
$scope.onSlideChanged = function (nextSlide, direction) {console.log('onSlideChanged:', 方向, nextSlide);};
在 html 模板中:
...
希望这有助于:)
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.
See my attempt: 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>
On document load:
$('#myC').live('slid.bs.carousel', function (event) { console.log("slid"); } );
It should work something like this: http://jsfiddle.net/9fwuq/ - non-angular-ui carousel
Perhaps there is a more Angular way to hook into the fact that my chart has slid into view?
There are 3 ways I can think of and that depends of your requirement.
Please see http://plnkr.co/edit/FnI8ZX4UQYS9mDUlrf6o?p=preview for examples.
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'); } });
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); } });
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); }; } }; });
and use it like this:
$scope.onSlideChanged = function (nextSlide, direction) { console.log('onSlideChanged:', direction, nextSlide); };
and in html template:
<carousel interval="myInterval" on-carousel-change="onSlideChanged(nextSlide, direction)"> ...
Hope this help : )
这篇关于你如何绑定到 Angular-UI 的 Carousel Slide Events?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!