AngularJS指令用于jQuery Cycle插件

Question

我使用AngularJS和JQuery Cycle插件构建了这个网站。一切都很好，直到我需要将我的html partials移动到单独的文件夹中。现在当我运行代码时，我发现jQuery Cycle插件停止工作了。在Google上搜索后，我发现我需要创建一个指令来保留jQuery Cycle功能，但我不知道如何创建这样的指令，使得我在Angular网站中能够使用jQuery Cycle插件。

下面是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网站中工作吗？

- Mike

Answer 1

您的代码需要进行一些小修改才能正常工作：

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

Demo: http://jsfiddle.net/WK2Fg/1/

- codef0rmer

---

谢谢，我会尝试一下。只是提醒一下，我代码中的图片也是使用<img ng-src="{{imageSource}}" />从Angular中填充的，而不是你的静态图片。这应该不是问题，对吧？ - Mike

@mike：是的，这不应该是个问题。 - codef0rmer

我注意到，如果循环的元素是由ng-repeat填充的，这个方法不起作用。 - lucuma

这是因为你的指令在ng-repeat编译之前就执行了。为了解决这个问题，你可以将你的指令优先级设置高于ng-repeat。ngRepeat的优先级为1000，所以如果你的指令使用1001，则应该可以无缝地运行。 - codef0rmer

Answer 2

这是一个使用ng-repeat的jquery cycle工作示例：http://jsfiddle.net/9dGGb/1/。

我不得不将jquery cycle初始化包装在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);
        }
    };
});

- Stefano Castriotta

---

Stefano，在使用Angular时应完全避免使用setTimeout。Angular提供了$timeout服务来达到同样的目的（但你的直觉是正确的，它可以有效地解决ng-repeat问题 :) ）。 - Davide

我之前也遇到了同样的问题，但是我通过使用 if ($scope.$last) { } 来解决它，但我不确定这是否比 $timeout 更好或更糟。 - Travis