AngularJS - 挂钩到 Angular UI Bootstrap - Carousel Custom Next()? [英] AngularJS - Hook into Angular UI Bootstrap - Carousel Custom Next()?

问题描述

我正在尝试实现一个 Angular UI Bootstrap carousel，但我将它用于测验.因此，我不需要普通的 Prev() 和 Next() 按钮.

I'm trying to implement a Angular UI Bootstrap carousel, but I'm using it for a Quiz. Therefore, I don't need normal Prev() and Next() buttons.

相反，我需要一个自定义 Next() 按钮，以确保他们在继续下一个问题/答案幻灯片"之前选择了一个答案.

Rather, I need a custom Next() button that makes sure they've selected an answer before continuing on to next "slide" of question/answers.

如何挂钩 carousel 指令函数来运行我的代码，然后使用 carousel.next() 函数?

How do I hook into the carousel directive functions to run my code and then use the carousel.next() function?

谢谢，斯科特

推荐答案

官方没有可能实现这一点.但如果你愿意，这可以被黑客入侵.但我认为最好抓住 bootstrap 原始版本，看看 angular bootstrap ui 源(carousel) 并编写您自己的包装器.

There is no official possibility to achieve this. but this can be hacked, if you want. But i think it is better grab the bootstrap original one, have a look the at angular bootstrap ui sources (carousel) and write your own wrapper.

黑客来了:

我们要解决的第一个问题是，如何访问CarouselController.没有公开它的 API，并且 carousel 指令创建了一个隔离的作用域.要访问此范围，需要在指令被 angular 实例化后代表轮播的元素.为了实现这一点，我们可以使用这样的指令，它必须与我们的 ng-controller 放在同一元素上:

The first problem we have to solve is, how to access the CarouselController. There is no API that exposes this and the carousel directive creates an isolated scope. To get access to this scope wie need the element that represents the carousel after the directive has been instantiated by angular. To achieve this we may use a directive like this one, that must be put at the same element as our ng-controller:

app.directive('carouselControllerProvider', function($timeout){
  return {
     link:function(scope, elem, attr){
       $timeout(function(){ 
         var carousel = elem.find('div')[1];
         var carouselCtrl = angular.element(carousel).isolateScope();

         var origNext = carouselCtrl.next;
         carouselCtrl.next = function(){
           if(elem.scope().interceptNext()){
               origNext(); 
           }
         }; 

       });
     }
  };
});

我们必须将我们的代码包装在一个 $timeout 调用中，以等待 angular 创建隔离作用域(这是我们的第一个 hack - 如果我们不想要这个，我们必须放置我们的指令在轮播下.但这是不可能的，因为内容将被替换).下一步是找到替换后转盘的元素.通过使用函数 isolateScope，我们可以访问隔离的 Scope - 例如到 CarouselController.

We must wrap our code in a $timeout call to wait until angular has created the isolated scope (this is our first hack - if we don't want this, we had to place our directive under the carousel. but this is not possible, because the content will be replaced). The next step is to find the element for the carousel after the replacement. By using the function isolateScope we have access to the isolated Scope - e.g. to the CarouselController.

下一个技巧是，我们必须用我们的实现替换 CarouselController 的原始 next 函数.但是要稍后调用原始函数，我们必须保留此函数以备后用.现在我们可以替换 next 函数.在这种情况下，我们调用我们自己的控制器的函数 interceptNext.我们可以通过代表我们控制器的元素的作用域来访问这个函数.如果interceptNext 返回true，我们将调用carousel 的原始next 函数.当然，您可以向我们的控制器公开完整的原始 next 函数 - 但出于演示目的，这已经足够了.我们像这样定义我们的 interceptNext 函数:

The next hack is, we must replace the original next function of the CarouselController with our implementation. But to call the original function later we have to keep this function for later use. Now we can replace the next function. In this case we call the function interceptNext of our own controller. We may access this function through the scope of the element that represents our controller. If the interceptNext returns true we call the original next function of the carousel. For sure you can expose the complete original next function to our controller - but for demonstration purposes this is sufficient. And we define our interceptNext function like this:

$scope.intercept = false;
$scope.interceptNext = function(){
   console.log('intercept next');
   return !$scope.intercept;
}

我们现在可以通过绑定到 $scope.intercept 的复选框来控制轮播的 next 功能.PLUNKR 证明了这一点.

We can now control the next function of the carousel by a checkbox, that is bound to $scope.intercept. A PLUNKR demonstrates this.

我知道这不完全是您想要的，但是演示了如何做到这一点.

I knew this is not exactly what you want, but how you can do this is demonstrated.

这篇关于AngularJS - 挂钩到 Angular UI Bootstrap - Carousel Custom Next()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！