javascript - new - Directiva Angularjs para jQuery Cycle Plugin

create new controller angularjs

Question

Construí el sitio con AngularJs y JQuery Cycle Plugin. Todo estaba funcionando bien hasta que necesité mover mis parciales html en carpetas separadas. Ahora cuando ejecuto mi código, veo que el complemento jQuery Cycle dejó de funcionar. Buscando en Google y descubrí que necesito crear una directiva que preserve la funcionalidad de jQuery Cycle, pero no tengo idea de cómo crear una directiva que haga que mi complemento jQuery Cycle funcione en un sitio angular.

Debajo está cómo está en el código jQuery y las condiciones de trabajo

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

Y este es uno roto que no funciona con un enfoque directivo.

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

¿Puede alguien decirme cómo crear una directiva que haga que el complemento Cycle funcione en un sitio angular?

Answer 1

Tu código debería funcionar con algunas pequeñas modificaciones:

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

Demostración: http://jsfiddle.net/WK2Fg/1/

Answer 2

Aquí hay un ejemplo de trabajo de jquery cycle con ng-repeat: http://jsfiddle.net/9dGGb/1/ .

Tuve que ajustar la inicialización del ciclo de jquery en un setTimeout, porque no funciona incluso si la prioridad es> 1000:

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