AngularJS - 勾成角UI引导 - 旋转木马自定义下一个（）？ [英] AngularJS - Hook into Angular UI Bootstrap - Carousel Custom Next()?

问题描述

我想实现一个角UI引导旋转木马，但我使用它的一个测验。所以，我并不需要正常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.

相反，我需要一个自定义的下一个（）的按钮，确保它们继续到下一个问题/回答滑动之前已经选择了一个答案。

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

我如何钩到传送带指令功能运行我的code，然后使用carousel.next（）函数？

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

谢谢，
斯科特

Thanks, Scott

推荐答案

有没有正式的可能性，以实现这一目标。但可以被黑客入侵，如果你想。但我认为这是更好地抓住引导原单，看看该角度引导用户界面源（的转盘）和写自己的包装。

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暴露这和转盘指令创建一个孤立的范围。要访问此范围内魏某需要一个重新presents指令后，旋转木马被实例化由角的元素。要做到这一点，我们可以使用一个指令，像这样的，必须在相同的元素放在作为我们的NG-控制器：

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

       });
     }
  };
});

我们必须包裹我们的code在 $超时打电话要等到角度创造了隔离范围（这是我们的第一次入侵 - 如果我们不这样做希望如此，我们必须把我们的指令转盘下。但这是不可能的，因为它的内容将被替换）。下一步骤是找出对于更换后的圆盘传送带的元件。通过使用功能 isolateScope 我们已经进入隔离范围 - 例如在 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 原来一个功能。但后来调用原函数，我们必须保持这个功能以备后用。现在，我们可以替换接下来功能。在这种情况下，我们呼吁我们的控制器的功能 interceptNext 。我们可以通过重新presents我们的控制器元素的范围内访问该功能。如果 interceptNext 收益真正我们所说的旋转木马原来一个功能。肯定可以公开完整的原始下一个函数来我们的控制器 - 但出于演示的目的，这是不够的。我们这样定义我们的 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 。一个 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 - 勾成角UI引导 - 旋转木马自定义下一个（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！