将 Fancybox 插件转换为 Angular 指令

Question

我正在使用ng-repeat 在每个按钮中放置一个 url 到 iframe {{item.details}}，这样可以正常工作。
HTML：

<a class="various small_button shadow none" fancybox ng-href="{{item.details}}">View Details</a>

问题是为fancybox 创建一个指令，以便在单击按钮时创建一个lightbox iframe。我试图通过查看这些帖子 post1 和 post 2 以及其他一些帖子来解决这个问题，它们很有帮助，但在这种情况下不是解决方案。

Fancybox 指令：

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

        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',
                source      :function(current){
                    return $(current.element);

                }
            });
        }
    }
});

使用 jQuery，我使用类“.various”和“.ad”调用 fancybox。我想以同样的方式调用fancybox，只使用角度。

原始花式 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

Answer 1

你可以使用：

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'。 More information

你需要使用$(element).fancybox({ ... })，因为fancybox是一个jquery插件。