AngularJS Fancybox Popup

Question

I have started an angularjs project and I would like to implement fancybox.

For this, I have included the jQuery and fancybox plugins to the solution. I am attemptin

Answer 1

I extended the answer above to use Angular's template cache.

It is invoked in the markup like this:

Open Fancybox

The code for the directive is:

app.directive('fancybox', function ($templateRequest, $compile) {
    return {
        scope: true,
        restrict: 'A',
        controller: function($scope) {
            $scope.openFancybox = function (url) {
                $templateRequest(url).then(function(html){
                    var template = $compile(html)($scope);
                    $.fancybox.open({ content: template, type: 'html' }); 
                });
            };
        },
        link: function link(scope, elem, attrs) {
            elem.bind('click', function() {
                var url = attrs.fancyboxTemplate;
                scope.openFancybox(url);
            });
        },
    }
});

Here's the plunker.