Question

我用AngularJs和JQuery Cycle Plugin构建了这个站点。一切都很好，直到我需要将我的html部分移动到单独的文件夹中。现在当我运行我的代码时，我看到jQuery Cycle插件停止工作。谷歌搜索，我发现我需要创建一个保留jQuery循环功能的指令，但我不知道如何创建一个指令，使我的jQuery Cycle插件在Angular站点中工作。

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

有人可以告诉我如何创建一个使循环插件在Angular站点中工作的指令吗？

Answer 1

您的代码应该稍作修改：

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

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

Answer 2

以下是使用ng-repeat的jquery循环的工作示例：http://jsfiddle.net/9dGGb/1/。

我必须在setTimeout中包装jquery循环初始化，因为即使优先级为＆gt;它也不起作用。 1000：

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

Angularjs指令适用于jQuery Cycle插件

2 个答案: