AngularJS ngRepeat和jQuery - DOM重建问题 [英] AngularJS ngRepeat and jQuery - DOM rebuilding issues

问题描述

我非常清楚地知道混合angularjs和jQuery是如何不是一个好主意。
不过，我需要一个定制的旋转木马，它可以通过文字ONLY滑动。为angularjs所有现有的转盘动画很大程度上取决于图像是内容的一部分，而我也没有图像。
于是，我找到了这样的事情一个很好的jQuery库，被称为华而不实。

I am very well aware how mixing angularjs and jquery is NOT a good idea. However, I need a custom carousel, which could slide through TEXT ONLY. All the existing carousel animations for angularjs depend heavily on image being part of the content, whereas I have no images. So I found a very good jquery library for such a thing, called "slick".

这与angularjs效果很好，但是当我动态添加新值到现有阵列，整个事情会崩解。
我怎么能更改code的这一部分，这样我可以动态添加对象数组，并保持光滑的jQuery库工作吗？

It works well with angularjs, but when I dynamically ADD new values to an existing array, the whole thing breaks apart. How could I change this part of code so that I could dynamically add objects to array AND keep jquery slick library working?

这里的code，你可以preSSpreV和下一步，旋转木马的工作，但只要你preSS加入新的元素按钮，整个事情分崩离析。
http://jsbin.com/tihodihuho/1/edit?html,js,output

Here's the code, you can press "prev" and "next" and carousel will work, but as soon as you press ADD NEW ELEMENT button, the whole thing falls apart. http://jsbin.com/tihodihuho/1/edit?html,js,output

推荐答案

您需要确保，到时候你调用jQuery函数 unslick 和光滑的DOM已经呈现。

You need to make sure that by the time your call the jQuery functions unslick and slick the DOM has already been rendered.

您可以完成，通过有（有延迟0，当然）一个 $超时函数中的那些功能。这将确保 $超时函数将 $ diggest 周期后得到执行里面的code已完成

You can accomplish that by having those functions inside a $timeout function (with delay 0, of course). That will ensure that the code inside the $timeout function will get executed after the $diggest cycle has finished.

试试这个：

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

在为了解决这个问题的任择议定书贝娄的评论描述的问题，而且它与我这个解决办法想出了原来的问题完全无关：

UDATE

In order to fix the issue that the OP described in the comments bellow, and that it's completely unrelated with the original question I've came up with this workaround:

$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
  });            
});

这篇关于AngularJS ngRepeat和jQuery - DOM重建问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！