How can I get AngularJS binds working with a fancybox dialog?

[Alessandro Pelliciari]

I'm learning AngularJS (awesome!) and I'm having some difficulties with dialogs.

Since i'm converting my app from a classical Jquery-based to an angular one, i want to use Fancybox to open dialogs with custom dynamic HTML inside, with the fancybox open method.

$.fancybox.open(html);

I wrote a service to use fancybox: now i open my dialogs but the content inside the dialog is not "compiled" against angular, so any angular directive set on that HTML doesn't work.

See the example http://plnkr.co/edit/UwryF1ocleyND7zxCGJz?p=preview

I imagine that the problem is in the service, but i don't know how to fix it. Could you show me how i can get an html sensible to angular directive inside the HTML shown in the dialog?

Thank you,

Alessandro

(same post is on stackoverflow http://stackoverflow.com/questions/19729384/how-can-i-get-angularjs-binds-working-with-a-fancybox-dialog )

[OpenNota]

http://plnkr.co/edit/iei9SxLCXvzjnMpsmOyb?p=preview

[Jose M]

It's not working because fancybox is creating a new set of DOM elements based on the html string that you are passing to fancybox.  I did a quick search but I couldn't find the right API/documentation for fancybox so I wasn't able to see how you might be able to get them to play nice together.

[Alessandro Pelliciari]

now i've passed directly the object, as @OpenNota suggested.

Anyway, what's the appropriate way to manage things like this in angular? a directive will be better?

[Dan Kang]

We did exactly this (fancybox integration) and went with a service that does the heavy lifting in terms of compiling and integration and fancybox integration and a directive that takes the contents (just .html()) and passes it to the service.  Having all the logic in a directive is somewhat inconvenient because we're using fancybox to do popups from a lot of different places.

[Alessandro Pelliciari]

Dan, would you mind to post me your fancybox service? or a simplified example? just to understand how to rethink my code

[Alessandro Pelliciari]

i've tried to use $compile, and set a directive instead of a service (calling the method inside the directive directly from ng-click)

http://plnkr.co/edit/Y18bRSMdV62VObMGJ2Ie?p=preview

what's wrong now? why my $compile doesn't work as expected?