Destroy Angularjs function

Asked

Viewed 178 times

0

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

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

Follow what I’ve done so far, but without success:

Function that starts Flexslider:

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

Function I entered in 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 performing the function and start it, someone can help?

javascript jquery angularjs flexslider

  • What the function vm.sliderCol() does? Do you know if it is working? For within the Angularjs use setTimeout is not the right method. The right one is to replace it with $timeout.

  • Yeah, I replaced it with $timeout. The vm.sliderCol function starts the Flexslider, referring to my answer below, when I click on a category, I destroy the flex and start again with the function, because as it is as a None display in a tab, it does not take the height of the div and so it was not being displayed. But destroying the function of the flex and starting again it takes the height, because when starting the tab is already open.

  • 1

    Got it. But then, why are you wearing a $timeout with only 100 of delay? I know that many people use it to "activate" the changes within the middle Angular. Would that be your case? If so, maybe it’s best to use $digest(), would not be your case?

  • Good tip, I will research on and implement :D

  • Read my answer: http://answall.com/questions/139220/fun%C3%A7%C3%A3o-n%C3%A3o-executa-sem-settimeout/140117#140117 Address this question =D

2 answers

1


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

  • Interesting. A suggested improvement would be to not use setTimeout. From what I saw in your code, it just seems like you want to perform the function. I suggest using $digest() for the angular run again the whole cycle and get the changes between model and view.

1

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

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

Hug and hope I helped.

  • Good, I found the solution, it is similar, I will post it.

Browser other questions tagged javascript jquery angularjs flexslider

You are not signed in. Login or sign up in order to post.