【问题标题】：angular-ui: Trigger events on Carouselangular-ui：轮播上的触发事件
【发布时间】：2023-04-07 14:44:01
【问题描述】：

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

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

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

【问题讨论】：

您在问题中链接的问题中有两种方法可以做到这一点。你能提供一些代码并准确解释你卡在哪里吗？
这里有一个 plunker：plnkr.co/edit/nWSsGt9t9AftuiPKM4pa?p=preview 我的解决方案实际上是使用 angular.element('.right').trigger('click'); 触发点击但这太可怕了……
好的，是的，我可能不会使用这种方法，但您的目标是在轮播之外只设置一些按钮，让您可以转到下一张幻灯片或上一张幻灯片吗？或者您想转到特定幻灯片？您只想从轮播的控制器触发行为，还是想从其他控制器执行此操作？我只是想弄清楚如何给你最好的建议。
抱歉，我的描述不够清楚。基本上，我想添加新的上一个，下一个按钮。

标签： javascript angularjs twitter-bootstrap angular-ui angular-ui-bootstrap

【解决方案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>

这是一个非常简单的指令，但它的工作原理如下：

carousel 有 $scope.next 和 $scope.prev 方法，但是我们不能直接从控制器访问它们，因为 carousel 有一个隔离的范围。为了公开它们，在 carouselControls 链接函数中，我们创建了两个方法 goNext 和 goPrev，我们将它们添加到 carouselControls 的作用域中。

由于 carouselControls 没有隔离作用域，因此传递给链接函数的作用域是其父控制器的作用域。我们使用这些方法在元素的isolatedScope 上调用next 或prev 方法（这是轮播元素，因为这是我们放置carouselControls 指令的地方）。

【讨论】：

这似乎不适用于 ui-bootstrap 的新工作方式（而不是使用，您现在使用

【解决方案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）

【讨论】：