Angularjs指令jQuery循環插件

我用AngularJs和JQuery循環插件構建網站。一切都很好，直到我需要將我的HTML部分移動到單獨的文件夾中。現在，當我運行我的代碼時，我看到jQuery Cycle插件停止工作。谷歌搜索，我發現我需要創建一個指令，將保留jQuery循環功能，但我不知道如何創建一個指令，使我的jQuery循環插件在Angular網站中工作。Angularjs指令jQuery循環插件

下面是它是如何在jQuery代碼和工作狀態

$(".items").cycle({ 
fx:  'scrollHorz', 
speed: 'slow', 
timeout: 1000, 
next: '.move-left', 
prev: '.move-right' 
     });

而這一次是一個破碎的一個不使用指令的方式工作。

myAngularApp.directive('cycle', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      $(".items").cycle({ 
      fx:  'scrollHorz', 
      speed: 'slow', 
      timeout: 1000, 
      prev: '.move-left', 
      next: '.move-right' 
     }); 
     } 
    }; 
});

誰能告訴我如何創建一個指令，這將使循環的插件工作在角站點？

來源

2013-10-03 Mike

您的代碼應與一些小的修改工作：

myApp.directive('cycle', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     $(element).cycle({ 
      fx: 'fade', 
      timeout: 10 
     }); 
    } 
    }; 
});

演示：http://jsfiddle.net/WK2Fg/1/

來源

2013-10-04 05:52:21 codef0rmer

謝謝，我想給一個嘗試。只是供參考我在我的代碼中的圖像也填充從Angular使用作爲您的靜態圖像。那應該不是問題，對嗎？ – Mike

@mike：是的，這不應該是一個問題。 – codef0rmer

謝謝噸。我真的很感謝你的幫助。 – Mike

這裏是jQuery的週期，NG-重複的工作示例：http://jsfiddle.net/9dGGb/1/。

我只好換了jQuery週期初始化在setTimeout的，因爲它甚至不若優先級> 1000工作：

myApp.directive('cycle', function() { 
    return { 
     restrict: 'A', 
     priority: 1001, 
     link: function(scope, element, attrs) { 
      setTimeout(function(){ 
       $(element).cycle({ 
        fx: 'fade', 
        timeout: 10 
       }); 
      }, 0); 
     } 
    }; 
});

來源

2014-06-27 11:25:57

Stefano，使用Angular時應該完全避免setTimeout。 Angular爲同樣的目的提供了$超時服務（但是你的預感是正確的，應該有效地解決ng-repeat問題的問題:)） – Davide

我有同樣的問題，但回過頭來，而不是包裝它'if（$ scope。$ last）{}'但我不確定這是好還是差超時。 – Travis

Angularjs指令jQuery循環插件

回答

相關問題