angular-ui:在Carousel上触发事件

angular-ui: Trigger events on Carousel

本文关键字：事件 Carousel angular-ui      更新时间：2023-09-26

我正在使用angular-UI的Carousel，我想从我的控制器触发"prev"answers"next"事件。
在Github上有关于它的问题，但它似乎没有实际处理:https://github.com/angular-ui/bootstrap/issues/1836

带有柱塞的Carousel页面示例:http://angular-ui.github.io/bootstrap/

有什么最好的方法吗?谢谢你！

您可以创建一个自定义指令，在您的作用域上公开carousel的下一个和上一个方法:

<标题> 恰好演示
app.directive('carouselControls', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.goNext = function() {
        element.isolateScope().next();
      };
      scope.goPrev = function() {
        element.isolateScope().prev();
      };
      
    }
  };
});

将指令添加到您的carousel元素中，然后您可以在控制器作用域中调用goPrev或goNext方法。

<carousel carousel-controls ... ></carousel>
//Call goNext() or goPrev() such as:
<button class="btn btn-primary" ng-click="goNext()">Next Slide</button>

这是一个非常简单的指令，下面是它的工作原理:

旋转木马有$scope.next和$scope.prev方法，但我们不能直接从控制器访问它们，因为旋转木马有一个孤立的作用域。为了公开它们，在carouselControls链接函数中，我们创建了两个方法goNext和goPrev，并将它们添加到carouselControls的作用域中。

因为carouselControls没有独立的作用域，所以传递给link函数的作用域就是它的父控制器的作用域。我们使用这些方法在元素的isolatedScope上调用next或prev方法(这是carousel元素，因为这是我们放置carouselControls指令的地方)。

jme11的答案似乎不适用于最新版本的angular-ui。相反，我发现我需要做一个像下面这样的指令:

.directive('carouselControls', function() {
    return {
        require: '^uibCarousel',
        link: function(scope, element, attrs, carouselCtrl) {
          scope.goNext = function() {
            carouselCtrl.next();
          };
          scope.goPrev = function() {
            carouselCtrl.prev();
          };
        }
    };
})

(灵感来自这个答案)

相关文章：