AngularJS ngRepeat 和 jQuery - DOM 重建问题

Question

我非常清楚混合 angularjs 和 jquery 不是一个好主意。 但是，我需要一个自定义轮播，它只能通过 TEXT 滑动。 angularjs 的所有现有轮播动画都严重依赖图像作为内容的一部分，而我没有图像。 所以我为这种东西找到了一个非常好的 jquery 库，叫做“slick”。

它适用于 angularjs，但是当我将新值动态添加到现有数组时，整个事情就崩溃了。 如何更改这部分代码，以便我可以动态地将对象添加到数组并保持 jquery slick 库正常工作？

这是代码，您可以按“上一个”和“下一个”，轮播将起作用，但只要您按“添加新元素”按钮，整个事情就会崩溃。 http://jsbin.com/tihodihuho/1/edit?html,js,output

Answer 1

您需要确保在调用 jQuery 函数 unslick 和 slick 时，DOM 已经被渲染。

您可以通过将这些函数放在 $timeout 函数中来实现这一点（当然，延迟为 0）。这将确保$timeout 函数内的代码将在$diggest 循环结束后执行。

试试这个：

Example

controller('myCtrl', ['$timeout',function($timeout){ 
  var self = this;  
  self.data = [{
        id: 1,
        title: 'A title, representing part 1',
        text: 'This is my TEXT 1'
      },
      {
        id: 2,
        title: 'Anoter interesting title that will grab your attention',
        text:'...and even longer text!'
      }];

  self.next =function() {
    $('.your-class').slickNext();
  };

  self.prev =function() {
    $('.your-class').slickPrev();
  };

  self.add = function() {
    var newID = self.data.length + 1;
    self.data.push({
      id:newID,
      title:'A totally new object!',
      text:'Dynamically added object to an existing array.'
    });   
    $timeout(function(){      
      $('.your-class').unslick();
       $('.your-class').slick({
        autoplay: false,
        autoplaySpeed: 1500,
        swipeToSlide: true
      });            
    });
  };
}]);

更新日期

为了解决 OP 在下面的 cmets 中描述的问题，并且它与原始问题完全无关，我想出了这个解决方法：

$timeout(function(){            
  $('.your-class').unslick();

  //You would think that `unslick` would take care of this, but it didn't so: 
  $('.your-class .slick-cloned, .your-class .slick-list.draggable').remove();

  //this is a workaround, which proves that the issue was with the plugin
  //nothing to do with the original question. In order to address this properly the
  //OP should open a new question or a bug in the `unslick` plugin.

   $('.your-class').slick({
    autoplay: false,
    autoplaySpeed: 1500,
    swipeToSlide: true
  });            
});

Example