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