Plunker Demo

Question

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

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

关于最佳方法的任何想法？谢谢！

Answer 1

您可以创建一个自定义指令，公开您范围内轮播的下一个和上一个方法：

Plunker Demo

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函数的范围是其父控制器的范围。我们使用这些方法在元素的next上调用prev或isolatedScope方法（这是carousel元素，因为这是我们放置carouselControls指令的地方）。

Answer 2

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

（灵感来自this answer）

angular-ui：在Carousel上触发事件

2 个答案:

Plunker Demo