AngularJS - Hook into Angular UI Bootstrap - Carousel Custom 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.

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

Thanks, Scott

回答1:

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.

Here comes the hack:

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

       });
     }
  };
});

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.

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

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.

回答2:

That hack is neat michael, I started working on something similar for my needs. But then realized I might as well finally dip my toe into contributing to the open source community.

I just submitted a pull request to update the library so the index of the current slide is exposed to the Carousel scope.

https://github.com/angular-ui/bootstrap/pull/2089

This change allows you to have per-slide behavior in the carousel template.

This change allowed me to override the base carousel template so that for instance on the first slide the "prev" button would not show or the "next" button would not show for the final slide.

You can add more complex logic for your own personal needs, but exposing the current index in this manner to the $scope is part of making this part of the framework more flexible.

EDIT

I made more changes for my personal use, but don't want quite yet to contribute this change which is closer to what you are needing.

I modified the carousel directive, adding the "finish" property to scope.

.directive('carousel', [function () {
    return {
        restrict: 'EA',
        transclude: true,
        replace: true,
        controller: 'CarouselController',
        require: 'carousel',
        templateUrl: 'template/carousel/carousel.html',
        scope: {
            interval: '=',
            noTransition: '=',
            noPause: '=',
            finish: '='
        }
    };
}])

Then, when I declare the carousel, I can pass in a method to that directive attribute which is a method in the scope of the controller containing the carousel.

<carousel interval="-1" finish="onFinish">
    ...
</carousel>

This allows me to modify my template to have a button that looks like this:

<button ng-hide="slides().length-1 != currentIndex" ng-click="finish()" class="btn next-btn">finish<span class="glyphicon glyphicon-stats"></span></button>

So it only shows conditionally on the correct slide and with ng-click it is calling the carousel's $scope.finish() which is a pointer to a method in the controller I created for this application.

Make sense?

edit: This only works if you don't use sort functionality with ng-repeat. There is a bug which breaks the indexing of the slides for this kind of functionality.

来源：https://stackoverflow.com/questions/21337230/angularjs-hook-into-angular-ui-bootstrap-carousel-custom-next

标签

angularjs

angularjs-directive

angular-ui-bootstrap