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

问题描述

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

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-carousel 的下一个事件确实被触发，但它没有通过我的指令调用它.只是为了将苹果与苹果进行比较，我尝试按原样使用答案中的代码(即捕获选择"事件)，并且确实可以完美运行并调用我的回调函数.我需要捕获next"而不能使用select"的原因是因为我正在使用它来设置一个wizard"类型的框架，而最终的next"是一个done"，需要做不同的代码.

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?

推荐答案

所以看到我是如何试图劫持"carousel 控件以将其转换为向导控件时，我最终只是获取了 carousel 代码并进行了更改它完全符合我的需要.如果有人想看代码，请告诉我，我会在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屋！