4

我用 AngularJs 和 JQuery Cycle Plugin 构建了这个网站。一切都很好，直到我需要将我的 html 部分移动到单独的文件夹中。现在，当我运行我的代码时，我看到 jQuery Cycle 插件停止工作。谷歌搜索，我发现我需要创建一个指令来保留 jQuery Cycle 功能，但我不知道如何创建一个指令，让我的 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' 
        });
        }
    };
});

有人能告诉我如何创建一个指令，让 Cycle 插件在 Angular 站点中工作吗？

4

2 回答 2

8

您的代码应该进行一些小的修改：

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-04T05:52:21.733 回答
1

这是一个使用 ng-repeat 的 jquery 循环的工作示例：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-27T11:25:57.903 回答