ng-click events dot no longer function when having a responsive setting and changing browser size

[langman66]

I have a ng-click on my individual slides that will take users to a different page when clicked. I also have the responsive attribute setup following the example application. I used the example application bundled with angular-slick as a baseline.

When my view first loads, everything works correctly. I can click the hyperlink and receive the click event. However, if I change the size of the browser window that triggers one of the breakpoint settings, then the ng-click events no longer gets fired.

Does anyone know how to work around this issue or to allow the angular framework to re-watch for the ng-click events?

I have a plnkr here that demonstrates the issue. Just run the plnkr, then resize the browser or the panel. I think the slick.js library is doing a destroy and recreation of the html and angular does not have a chance to re-apply its watch for the ng-click events.

http://plnkr.co/edit/FCeE8AejXsjxWh6WR1wd

My View:

{{ i }}

Click Here

Current index: {{ index }}

    </slick>

My Controller:
$scope.clickTheThing = function(theIndex) {
console.log('clicked index' + theIndex);
alert('clicked index' + theIndex);
}

    return $scope.breakpoints = [
      {
          breakpoint: 768,
          settings: {
              slidesToShow: 2,
              slidesToScroll: 2
          }
      }, {
          breakpoint: 480,
          settings: {
              slidesToShow: 1,
              slidesToScroll: 1
          }
      }
    ];

[bjoernWahle]

Did you find a solution for your problem? I'm currently facing the same problem, but whith ng-mouseenter and ng-mouseleave.

[langman66]

Unfortunately we were not able to solve this so I had to use a totally different design approach.

[surendrakashyap]

I have bumped into exactly the same issue. Everything has been working great until we hit responsive break. Is there any work-around? Image will need to be clickable with access to angular scope.

[langman66]

Someone put an answer on stack overflow for a traditional jquery fix.

You can see the response here.

http://stackoverflow.com/questions/29101254/angularjs-slick-js-carousel-ng-click-not-firing-with-responsive-attribute-settin

[surendrakashyap]

Since I am using foundation 5, I finally end-up using three different with slide-to-show defined for each screen size instead of using "responsive" breakpoint and let foundation do the showing and hiding based on device/screen since using same same data it is okay. Just little bit of extra markup but much cleaner option for me.

[lukeferguson]

It looks like the issue is with how slick handles checking the responsive breakpoints. I notice that Slick.prototype.destroy() gets called which replaces the elements HTML with the compiled slides, thus losing any context of the angular scope.

A possible solution could be to let angular-slick take care of the breakpoint checking on window.resize and re-init slick when needed?

[umpirsky]

Any news on this issue?

[hussainb]

Stuck on the same thing here.

[amrfaisal]

I think it's a core feature that needs to be fixed before deciding to use this plugin. So we need to share ideas to fix it angular way.

[amrfaisal]

Check my answer for Angular use-case:
http://stackoverflow.com/questions/29101254/angularjs-slick-js-carousel-ng-click-not-firing-with-responsive-attribute-settin/30584787#30584787

[umpirsky]

@amrfaisal Your workaround fixed it for scenario when resizing the window. But in my case ng-click events are not triggered on mobile at all. Is there any workaround for this. Thanks!

[umpirsky]

@amrfaisal Doing it on setPosition fixes my issue, check #100.

[amrfaisal]

"angular-slick" binds the "onInit" event actually after initializing "Slick", and this is totally wrong.
Based on this: kenwheeler/slick#1005. Events binding should be done before initializing "Slick".
So to fix it, you should edit the library it-self "angular-slick" and move events binding before slick initialization.

[xml]

I think angular-slick has gone inactive, judging by the huge backlog of PRs. But you can fix this problem with amrfaisal's solution on StackOverflow, and by simply making a copy of the library, and moving the two event-handlers. Inside of the 'intializeSlick' function, find slider.on('init', ... and slider.on('afterChange', ..., and move them up above the call to slider.slick({...}).

[umpirsky]

I downgraded and it worked.

[trippo]

Downgrade slick-carousel to version 1.3.15 and work without touch nothing