UI Bootstrap控件uib-carousel绑定到下一个事件 [英] UI Bootstrap control uib-carousel bind to next event

问题描述

我正在使用带有自定义模板的angular-bootstrap（ui.bootstrap）uib-carousel组件来更改后退和下一步按钮的样式，文本和功能。除了组件的原始功能外，我还必须在触摸下一步按钮时执行其他操作。遵循捕获此答案中选择事件的方法：如何绑定到Angular-UI的Carousel幻灯片事件？，我修改了答案以使用下一个事件。

I am using the angular-bootstrap's (ui.bootstrap) uib-carousel component with custom template to change the style, text, and functionality of the back and next buttons. I have to perform other actions when the "next" button is touched, in addition to the component's original functionality. Following the method of "capturing" the select event in this answer: How do you Bind to Angular-UI's Carousel Slide Events?, I modified the answer to use the next event.

html声明

<uib-carousel template-url="/tpl.html" active="vm.wizardStep" no-wrap="true" on-carousel-next="vm.onNext()" style="height: 395px;">

以及类似的指令

.directive('onCarouselNext', function($parse) {
  return {
    require: '^uibCarousel',
    link: function(scope, element, attrs, carouselCtrl) {
      var callBack = $parse(attrs.onCarouselNext);
      var origNext = carouselCtrl.next;
      carouselCtrl.next = function() {
        callBack(scope);
        return origNext.apply(this, arguments);
      };
    }
  };
});

uib轮播的下一个事件确实触发了，但是它不是通过我的指令调用的。只是为了将苹果与苹果进行比较，我尝试直接使用答案中的代码（即捕获 select事件），并且确实可以正常工作并调用我的回调函数。我需要捕获下一个而不能使用选择的原因是因为我正在使用它来设置向导类型的框架，而最后一个下一个是需要完成的完成做不同的代码。

The uib-carousel's next event does get fired, but it is not calling it through my directive. Just to compare apples to apples, I tried using the code in the answer as-is (i.e. capturing the "select" event), and that does work perfectly and calls my callback function. The reason I need to capture the "next" and can't use the "select" is because I'm using this to set up a "wizard" type framework, and the final "next" is a "done" that needs to do different code.

有人做过这样的事情并使其起作用吗？

Anyone done something like this and get it to work?

推荐答案

因此，看到我是如何尝试劫持轮播控件以将其转换为向导控件的，我最终只是采用了轮播代码并对其进行了完全更改以满足自己的需求。如果有人想看一下代码，请告诉我，我将其发布在github上。

So seeing as how I was trying to "hijack" the carousel control to turn it in to a wizard control, I ended up just taking the carousel code and changing it completely to fit my needs. If anyone would like to see the code, let me know and I'll put it out on github.

这篇关于UI Bootstrap控件uib-carousel绑定到下一个事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！