你如何与Angular-UI的Carousel Slide事件绑定？

Question

我正在使用Angular-UI的旋转木马,我需要告诉我的谷歌图表在他们滑入视图后重绘.尽管我已经阅读过,但我似乎无法参与此事件.

看看我的尝试: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/ - non-angular-ui carousel

也许有更多的Angular方式来勾解我的图表已滑入视野的事实？

Answer 1

我有三种方法可以考虑,这取决于您的要求.

有关示例,请参阅http://plnkr.co/edit/FnI8ZX4UQYS9mDUlrf6o?p=preview.

1. 使用$ scope.$监视单个幻灯片以检查它是否变为活动状态.

   $scope.$watch('slides[0].active', function (active) {
     if (active) {
       console.log('slide 0 is active');
     }
   });
   

2. 使用$ scope.$ watch使用自定义函数查找活动幻灯片.

   $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);
     }
   });
   

3. 使用自定义指令拦截carousel指令的select()函数.

   .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模板中:

   <carousel interval="myInterval" on-carousel-change="onSlideChanged(nextSlide, direction)">
   ...
   

希望这个帮助:)

Answer 2

AngularUI Bootstrap改变了控制器的命名约定,因为thery已经为所有控制器添加了前缀uib,因此下面是原始解决方案的更新解决方案runTarm:

角度:

.directive('onCarouselChange', function($parse) {
    return {
        require: '^uibCarousel',
        link: function(scope, element, attrs, carouselCtrl) {
            var fn = $parse(attrs.onCarouselChange);
            var origSelect = carouselCtrl.select;
            carouselCtrl.select = function(nextSlide, direction, nextIndex) {
                if (nextSlide !== this.currentSlide) {
                    fn(scope, {
                        nextSlide: nextSlide,
                        direction: direction,
                        nextIndex: this.indexOfSlide(nextSlide)
                    });
                }
                return origSelect.apply(this, arguments);
            };
        }
    };
});

使用TypeScript进行角度处理:

module App.Directive {

    export class CarouselChange implements ng.IDirective {

        public require: string = '^uibCarousel';

        constructor(private $parse: ng.IParseService) { }

        public link: ng.IDirectiveLinkFn = (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: any, carouselCtrl: any) => {
            var fn = this.$parse(attributes.carouselChange);
            var origSelect = carouselCtrl.select;
            carouselCtrl.select = function(nextSlide, direction) {
                if (nextSlide !== this.currentSlide) {
                    fn(scope, {
                        nextSlide: nextSlide,
                        direction: direction
                    });
                }
                return origSelect.apply(this, arguments);
            };
        }

        static Factory(): ng.IDirectiveFactory {
            var directive: ng.IDirectiveFactory = ($parse: ng.IParseService) => new CarouselChange($parse);
            directive['$inject'] = ["$parse"];
            return directive;
        }
    }
}

谢谢,