converting Fancybox plugin to Angular directive

Question

I'm using ng-repeat place a url to an iframe {{item.details}} in each button, which is working correctly.
HTML:

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

The problem is creating a directive for fancybox to create a lightbox iframe when the button is clicked. I've attempted to resolve this by viewing these posts post1 and post 2 and a few others, they were helpful but were not a solution in this case.

Fancybox directive:

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);

                }
            });
        }
    }
});

With jQuery I was invoking fancybox with classes ".various" and ".ad". I want invoke fancybox the same way only using angular.

Original Fancy 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

You can use:

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'
      });
    }
  }
});

The attribute restrict must be A (uppercase) since in your example the directive is an attribute. E (uppercase) is when the directive is an element. You can use combined: restrict: 'AE'. More information

You need use $(element).fancybox({ ... }) because fancybox is a jquery plugin.