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循环插件

回答

相关问题