javascript - angular-ui:轮播上的触发事件

Question

我正在使用 angular-UI 的轮播，我想从我的 Controller 触发“上一个”和“下一个”事件。
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();
      };
      
    }
  };
});

将指令添加到轮播元素，然后您可以在 Controller 范围内调用 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，但我们不能直接从 Controller 访问它们，因为轮播有一个独立的作用域。为了公开它们，在 carouselControls 链接函数中，我们创建了两个方法 goNext 和 goPrev，我们将它们添加到 carouselControls 的范围。

由于 carouselControls 没有独立的作用域，因此传递给链接函数的作用域是其父 Controller 的作用域。我们使用这些方法在元素的 isolatedScope 上调用 next 或 prev 方法(这是轮播元素，因为这是我们放置carouselControls 指令)。