Jquery 将Fancybox插件转换为Angular指令

我正在使用

ng repeat

在每个按钮中放置一个指向iframe{{{item.details}}的url，该按钮工作正常。
HTML:

使用jQuery，我调用了带有类“.variable”和“.ad”的

fancybox

。我想用同样的方法调用fancybox，只使用angular

原始的jQuery：

jQuery(document).ready(function(){
//fancybox window script
    $(".various").fancybox({
        type        :'iframe',
        scrolling   : 'no',
        maxWidth    : 800,
        maxHeight   : 400,
        fitToView   : true,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : true,
        openEffect  : 'none',
        closeEffect : 'none',
    });

    $(".ad").fancybox({
        maxWidth    : 210,
        maxHeight   : 140,
        fitToView   : true,
        width       : '100%',
        height      : '100%',
        autoSize    : false,
        closeClick  : true,
        openEffect  : 'none',
        closeEffect : 'none'
    });


});//set up close

您可以使用：

app.directive('fancybox', function(){
  return {
    restrict: 'A',

    link: function(scope, element, attrs){
      $(element).fancybox({  
        type        :'iframe',
        scrolling   : 'no',
        maxWidth    : 800,
        maxHeight   : 400,
        fitToView   : true,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : true,
        openEffect  : 'none',
        closeEffect : 'none'
      });
    }
  }
});

属性

restrict

必须是

A

（大写），因为在您的示例中，指令是一个属性<代码>E（大写）表示指令为元素时。您可以使用组合：

restrict:'AE'

---

您需要使用

$（element）.fancybox（{…}）

，因为fancybox是一个jquery插件。

谢谢@carlos ForeroThank You@CarlosForero。但如果同一路由被多次访问，则该指令每次都会创建多个事件处理程序。我怎么办？

jQuery(document).ready(function(){
//fancybox window script
    $(".various").fancybox({
        type        :'iframe',
        scrolling   : 'no',
        maxWidth    : 800,
        maxHeight   : 400,
        fitToView   : true,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : true,
        openEffect  : 'none',
        closeEffect : 'none',
    });

    $(".ad").fancybox({
        maxWidth    : 210,
        maxHeight   : 140,
        fitToView   : true,
        width       : '100%',
        height      : '100%',
        autoSize    : false,
        closeClick  : true,
        openEffect  : 'none',
        closeEffect : 'none'
    });


});//set up close

app.directive('fancybox', function(){
  return {
    restrict: 'A',

    link: function(scope, element, attrs){
      $(element).fancybox({  
        type        :'iframe',
        scrolling   : 'no',
        maxWidth    : 800,
        maxHeight   : 400,
        fitToView   : true,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : true,
        openEffect  : 'none',
        closeEffect : 'none'
      });
    }
  }
});