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/ - 非角度ui轮播

也许有更多的Angular方式可以解决我的图表滑入视野的事实？

Answer 1

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

请参阅http://plnkr.co/edit/FnI8ZX4UQYS9mDUlrf6o?p=preview以获取示例。

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

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

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

使用自定义指令拦截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;
        }
    }
}

谢谢，

Answer 3

按照runTarm给出的答案如果你想知道下一张幻灯片的索引，你应该添加如下内容：

 .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,nextIndex) {
      if (nextSlide !== this.currentSlide) {
        fn(scope, {
          nextSlide: nextSlide,
          direction: direction,
          nextIndex:this.indexOfSlide(nextSlide)
        });
      }
      return origSelect.apply(this, arguments);
    };
  }
  };
})

然后，在控制器中，您只需要执行此操作以捕获新索引：

$scope.onSlideChanged = function (nextSlide, direction, nextIndex) {
    console.log(nextIndex);
}

Answer 4

我设法修改了runTarm的回答，以便在幻灯片完成滑入视图后调用回调（即滑动动画已完成）。这是我的代码：

.directive('onCarouselChange', function ($animate, $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) {
                    $animate.on('addClass', nextSlide.$element, function (elem, phase) {
                        if (phase === 'close') {
                            fn(scope, {
                                nextSlide: nextSlide,
                                direction: direction,
                            });
                            $animate.off('addClass', elem);
                        }
                    });
                }
                return origSelect.apply(this, arguments);
            };
        }
    };
});

秘诀在于使用$ animate的事件处理程序在动画结束后调用我们的函数。

Answer 5

这是一个使用控制器的替代方法，介于runTarm的＃2和＃3之间。

原始HTML +新div：

<carousel id="myC" interval="myInterval">
  <slide ng-repeat="slide in slides" active="slide.active">
    <div ng-controller="SlideController"> <!-- NEW DIV -->
      <img ng-src="{{slide.image}}" style="margin:auto;">
      <div class="carousel-caption">
        <h4>Slide {{$index}}</h4>
        <p>{{slide.text}}</p>
      </div>
    </div>
  </slide>
</carousel>

自定义控制器：

  .controller('SlideController',
    function($log, $scope) {
      var slide = $scope.slide;
      $scope.$watch('slide.active', function(newValue) {
        if (newValue) {
          $log.info("ACTIVE", slide.id);
        }
      });
    });

Answer 6

如果你只想在幻灯片进入视频时开始播放视频，并在幻灯片离开时暂停：

<强> JS

{# Uses angular v1.3.20 & angular-ui-bootstrap v0.13.4 Carousel #}
{% addtoblock "js" %}<script type="text/javascript">
angular.module('videoplay', []).directive('videoAutoCtrl', function() {
  return {
    require: '^carousel',
    link: function(scope, element, attrs) {
      var video = element[0];
      function setstate(visible) {
        if(visible) {
          video.play();
        } else {
          video.pause();
        }
      }
      // Because $watch calls $parse on the 1st arg, the property doesn't need to exist on first load
      scope.$parent.$watch('active', setstate);
    }
  };
});
</script>{% endaddtoblock %}
{% addtoblock "ng-requires" %}videoplay{% endaddtoblock %}

注意：Django还有其他位

<强> HTML：

<carousel interval="15000">
  <slide>
   <video class="img-responsive-upscale" video-auto-ctrl loop preload="metadata">
    <source src=
...

你如何绑定Angular-UI轮播幻灯片事件？

6 个答案: