angularjs slick js carousel ng-click 不使用响应属性设置触发

Question

我正在使用 Angular 包装器 https://github.com/vasyabigi/angular-slick使用光滑的 slider 。

我在我的个人幻灯片上设置了一个 ng-click 设置，点击后会将用户带到不同的页面。我使用响应属性设置。

当 View 首次使用 slider 加载时，一切正常。我可以点击超链接并接收点击事件。但是，如果我更改触发断点设置之一的浏览器窗口的大小，则不再触发 ng-click 事件。

我认为这个问题与到达断点时光滑框架在幕后所做的销毁和重绘逻辑有关。

在响应断点被击中后，如何重新初始化 Angular 以观察 ng-click 事件？

http://plnkr.co/edit/FCeE8AejXsjxWh6WR1wd

风景:

<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>

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

您实际上可以依赖 data-ng-if为了这。

风景:

<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>

Controller

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

从上面的代码可以看出，我做了以下事情:

添加 data-ng-if到您的可点击元素。

添加范围变量 refreshing这将触发 data-ng-if .

覆盖光滑 onInit()功能改变refreshing值(value)。