angularjs slick js carousel ng-click not firing with responsive attribute settings

Question

I'm using the angular wrapper https://github.com/vasyabigi/angular-slick to use the slick slider.

I have a ng-click setup on my individual slides that will take users to a different page when clicked. I using the responsive attribute setup.

When the view first loads with the slider, 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.

I think the issue has to do with the destroy and redraw logic that the slick framework is doing under the covers when a breakpoint is reached.

How do I re-initialize angular to watch for ng-click events after a responsive breakpoint has been hit?

http://plnkr.co/edit/FCeE8AejXsjxWh6WR1wd

The view:

<h2>Single Item</h2>
    <slick class="slider single-item" data="this" current-index="index" responsive="breakpoints" slides-to-show=3 slides-to-scroll=3>
        <div ng-repeat="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]">
            <h3>{{ i }}</h3>
            <a ng-click="clickTheThing(i)" style="color:blue;">Click Here</a>
        </div>
        <p>Current index: {{ index }}</p>


    </slick>

The controller:

$timeout(function () {
        return $scope.awesomeThings = ['HTML5', 'AngularJS', 'Karma', 'Slick', 'Bower', 'Coffee'];
    }, 1000);


    $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
          }
      }
    ];

Answer 1

You can actually rely on data-ng-iffor this.

The View:

<slick on-init="slickOnInit()" class="slider single-item" data="this" current-index="index" responsive="breakpoints" slides-to-show=3 slides-to-scroll=3>
    <div ng-repeat="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]">
        <h3>{{ i }}</h3>
        <a data-ng-if="!refreshing" ng-click="clickTheThing(i)" style="color:blue;">Click Here</a>
    </div>
    <p>Current index: {{ index }}</p>
</slick>

The Controller

//Hack to fix slick-angular issue on responsive
$scope.slickOnInit = function(){
  $scope.refreshing=true;
  $scope.$apply();
  $scope.refreshing=false;
  $scope.$apply();
};

As you can see from the above code that I did the following:

• Add data-ng-if to your clickable elemnts.
• Add scope variable refreshing which will trigger data-ng-if.
• Override Slick onInit() function to change refreshing value.