Detect current slide and trigger a function based on that in ANgularJS

Question

I have a slider jquery plugin that rotate some images in timer. Its a minified version so i can't read the source. What i wanted to do is everytime the slide change, i want to automatically update an angular model. that model therefore will update some content on the page. How can i make angular track the change triggered by jquery?

Answer 1

Your Slider probably has some kind of documentation, check that out and look for anything about events. ( jQuery sliders usually broadcast an event on the slider element when things happen - slide change for example )

Then in your code set a listener on your slider event that get's triggered by the event. Inside that listeners callback, change the model, and call $scope.$apply(); if needed.

Example with slickslider :

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  yourModel = nextSlide;
});

where:

$('.your-element') is a selecting the slider element

beforeChange is an event that the plugin broadcasts right before it changes the current slide