angular-ui：轮播触发事件

Question

我正在使用 angular-UI 的旋转木马，我想从我的控制器触发 "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();
      };
      
    }
  };
});

将指令添加到轮播元素，然后您可以在控制器范围内调用 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 link 函数中，我们创建了两个方法 goNext 和 goPrev，我们将它们添加到 carouselControls 的范围中。

由于 carouselControls 没有独立的作用域，因此传递给 link 函数的作用域是其父控制器的作用域。我们使用这些方法在元素的 isolatedScope 上调用 next 或 prev 方法（这是轮播元素，因为这是我们放置 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：轮播触发事件

angular-ui: Trigger events on Carousel

javascript

twitter-bootstrap

angularjs

angular-ui

angular-ui-bootstrap

Plunker Demo