Javascript 在angularjs中带有参数的指令

我用angularjs和jQuery循环编写了一个指令

<div class="slideshow" cycle>
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
</div>

var myApp = angular.module('myApp',[]);

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

var myApp=angular.module（'myApp'，[]）；
myApp.directive（'cycle'，function（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
$（元素）。循环({
外汇：“淡出”，
超时：10
});
}
};
});

这个指令没有问题，但我想用一些参数来扩展它，例如，我需要这样的东西

<div class="slideshow" cycle='fade'>
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
    ...
</div>

...

您可以看到我设置循环='fade'

cycle是指令，fade是我的指令的循环效果参数

我怎样才能有一个带参数的指令并像上面那样使用它

<div class="slideshow" cycle='fade'> ////????????????
myApp.directive('cycle', function(effect) { ////?????????????????
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
               $(element).cycle({
                   fx: effect , ////?????????????????
                   timeout: 10
               });
            }
        };
    });

//？？？？？？？？？？？？
myApp.指令（'循环'，功能（效果）{///？？？？？？？？？？？？？？？？？
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
$（元素）。循环({
外汇：效果，//？？？？？？？？？？？？？？？？？
超时：10
});
}
};
});

您可以使用

包含规范化DOM元素属性的指令编译/链接函数之间的共享对象

范例

完整代码

HTML

编辑：

---

您可以使用隔离作用域概念将参数传递给自定义指令

HTML

---

如果我想有一个以上的参数，我怎么写这个？？例如，我想在你的控制器上设置fx效果和超时，你可以说$scope.cycleOpts={foo:'foo'，bar:'bar'…}；现在在指令中使用它是cycle=“cycleepts”，您可以按scope.options.foo获取数据。如果我想有多个参数，如何编写此参数？？例如，我想设置fx效果和超时。你可以创建多个参数，也可以使用Scope。你可以根据自己的想法更新帖子吗？（多参数的HTML和脚本）@HamedF，更新了答案，希望有帮助

$(element).cycle({
   fx: attrs.cycle,
   timeout: 10
});

<div class="slideshow" cycle='fade'>

var myApp = angular.module('myApp',[]);
myApp.directive('cycle', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
           $(element).cycle({
               fx: attrs.cycle,
               timeout: 10
           });
        }
    };
});

<div class="slideshow" cycle effect='fade' timeout='10'>

var myApp = angular.module('myApp',[]);
myApp.directive('cycle', function() {
    return {
        restrict: 'A',
        scope: {
            effect: '=',
            timeout: '=',
        },
        link: function(scope, element, attrs) {
           $(element).cycle({
               fx: scope.effect,
               timeout: scope.timeout
           });
        }
    };
});

var myApp = angular.module('myApp',[]);
myApp.directive('cycle', function() {
    return {
        restrict: 'A',
        scope: {
            options : "&cycle"
        },
        link: function(scope, element, attrs) {
           $(element).cycle({
               fx: scope.options.fx,
               timeout: 10
           });
        }
    };
});