Destroy AngularJS function

1

I have a page in my project that contains several categories and in each category, it has a Flexslider with the images. Each category is displayed once and clicking another one, the previous one is hidden and the one clicked appears, a scheme similar to Tabs.

I need when I click on another category, it will destroy the Flexslider function started in the previous category and run in this category.

Here's what I've done so far, but to no avail:

Function that starts Flexslider:

vm.sliderCol = function () {
        setTimeout(function () {
            $('.sliderCol').flexslider({
                animation: "slide",
                controlNav: false
            });
        }, 1000);
    }

Function that I inserted into the category button:

vm.clicou = function(){
    $('.sliderCol').flexslider("destroy");
    console.log('destruiu');
    setTimeout(function () {
        vm.sliderCol();
        console.log('iniciou');
    }, 1000);
}

Until then, I tried to destroy the Flexslider, I do not know if there is any method to stop running the function and start it, can anyone help?

    
asked by anonymous 08.09.2016 / 13:27

2 answers

1

With the ng-click in each category playing the function, I was able to destroy the slider and start it again with the following function:

vm.clicou = function(){
    $('.sliderCol').flexslider("destroy");
    $('.sliderCol').removeData("flexslider");
    setTimeout(function () {
        vm.sliderCol();
    }, 100);
}
    
09.09.2016 / 13:14
1

By default the FlexSlider has the slideshow: true attribute, in this case, to stop execution, you must set this value to false. Here's how it will look:

vm.clicou = function(){
  $('.sliderCol').flexslider({
    slideshow: false
  });
  console.log('destruiu');
};

I embrace and hope to have helped.

    
08.09.2016 / 20:40