angularjs 光滑的 js 轮播 ng-click 没有触发响应属性设置

Question

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

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

当视图首次加载滑块时，一切正常。我可以点击超链接并接收点击事件。但是，如果我更改触发断点设置之一的浏览器大小 window，则 ng-click 事件将不再被触发。

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

如何重新初始化 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>

控制器：

$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

我有一个可行的解决方案。虽然很新鲜，但值得分享。

所以在我的指令中，我的模板是 (jade):

ul.discover-menu
  li(ng-repeat='tile in tiles')
    a(data-id='{{tile[0]}}', ng-class='{active: (id && id == tile[0])}')
      div
      h6 {{tile[2]}}

不是将 ng-click 附加到一个 tile 按钮，而是给出一个带有某些东西的属性（在这种情况下是元素的 id），你想在之后选择并在指令中选择它；

  $timeout(function () {
    el.slick({
      dots: false,
      arrows: true,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 1,
      swipeToSlide: true,
      responsive: [
        // 2
        {breakpoint: 330, settings: {slidesToShow: 2, slidesToScroll: 2}},
        {breakpoint: 495, settings: {slidesToShow: 3, slidesToScroll: 2}},
        {breakpoint: 660, settings: {slidesToShow: 3, slidesToScroll: 2}},
        {breakpoint: 825, settings: {slidesToShow: 4, slidesToScroll: 2}},
        {breakpoint: 990, settings: {slidesToShow: 5, slidesToScroll: 2}},
        // 3
        {breakpoint: 1155, settings: {slidesToShow: 6, slidesToScroll: 3}},
        {breakpoint: 1320, settings: {slidesToShow: 7, slidesToScroll: 3}},
        {breakpoint: 1485, settings: {slidesToShow: 8, slidesToScroll: 3}},
        {breakpoint: 1650, settings: {slidesToShow: 9, slidesToScroll: 3}},
        {breakpoint: 1815, settings: {slidesToShow: 10, slidesToScroll: 3}},
        // 4
        {breakpoint: 1980, settings: {slidesToShow: 11, slidesToScroll: 4}},
        {breakpoint: 2145, settings: {slidesToShow: 12, slidesToScroll: 4}}
      ]
    });

    $(function () {
      $('a[data-id]').on('click', function () {
        console.log('link executed', $(this).data('id'));
      });
    });

  });

它或多或少是 http://jsfiddle.net/c5dmpzbt/

的实现版本

Answer 2

您实际上可以依靠 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>

控制器

//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.
覆盖 Slick onInit() 函数以更改 refreshing 值。

Answer 3

对于 ui-router 用户和引用其他页面的人

我注意到 ng-click 无法正常工作并且非常讨厌该解决方法。但是 ui-sref 对我有用。奇怪的是 `target="_blank"' 会破坏这个...

<!-- My custom directive that creates a slick carousel out of its contents -->
<carousel>
    <div ng-repeat="item in items.stuff" ui-sref="state({optionalParams: true})">Carousel Item</div>
</carousel>

不幸的是，轮播创建其他操作的页内解决方案仍然需要uires 一些特定的定位才能工作（如其他回答者所发布）。

angularjs 光滑的 js 轮播 ng-click 没有触发响应属性设置

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

angularjs

angularjs-ng-click

slick.js