AngularJS ngRepeat和jQuery - DOM重建问题

Question

我很清楚混合angularjs和jquery是不是一个好主意。 但是，我需要一个自定义传送带，它可以滑过TEXT ONLY。 angularjs的所有现有轮播动画在很大程度上取决于图像是内容的一部分，而我没有图像。 所以我发现了一个非常好的jQuery库，用于这样的事情，称为“光滑”。

它适用于angularjs，但是当我动态地将新值添加到现有数组时，整个事情就会分崩离析。 我怎么能改变这部分的代码，以便我可以动态地添加对象到数组并保持jQuery的光滑库工作？

这里是代码，你可以按“上一页”和“下一页”，旋转木马将工作，但只要按下添加新元素按钮，整个事情就会崩溃。 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 
     });    
    }); 
    }; 
}]); 

UDATE

为了解决这个问题的任择议定书在波纹管的注释中描述的问题，它是一个与原来的问题我完全无关已经提出了这种解决方法：

$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