0

I am using JS Fancybox and trying to work it with Angular. But Angular is not detecting HTML directives in Fancybox insertions on DOM. There is no iFrame etc.

Here is JSFiddle: https://jsfiddle.net/akkara/sL4k3ndz/10/

var app = angular.module("myApp",[]) ;
app.controller("myCtrl",function($scope) {
    $scope.lorem = "abc" ;
    $scope.ipsum = "def" ;
}) ;
app.directive("test", function() {
    return {
        template : "<strong>{{ipsum}}</strong>"
    };
});
$("a").click(function(){
    $.fancybox.open('Before <test> {{lorem}} After') ;
})

How to force Angular to handle HTML that inserted by Fancybox etc?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Digerkam
  • 1,826
  • 4
  • 24
  • 39
  • Very similar, but not same, could you solve it as described in the fiddle? – Digerkam Jun 11 '18 at 12:32
  • 1
    http://plnkr.co/edit/qUEIu0O5jyjUWn3CuuF2?p=preview – Fazie Jun 11 '18 at 12:54
  • As you notice that in that solution Fancybox triggered by "ng-click" attribute, I need to open it by programmaticly, when you open it programmaticly Angular do not render elements in Fancybox Container. Could you solve it programmaticly? @Fazie – Digerkam Jun 11 '18 at 13:18
  • What is the difference between the "ng-click" solution and your programmaticly solution ? – Fazie Jun 11 '18 at 13:45
  • Could you provide an example that open Fancybox programmaticly? @Fazie – Digerkam Jun 11 '18 at 14:07
  • I don't understand what you mean by "programmaticly" – Fazie Jun 11 '18 at 14:13
  • 1
    Click handlers that invoke jQuery plugins should be integrated with the AngularJS framework with custom directives. DOM that uses AngularJS directives or `{{ }}` interpolation need to be compiled and linked with the $compile service. – georgeawg Jun 11 '18 at 17:58
  • Thank you @georgeawg How to accomplish that? Could you share some code please? That problem is still wasting my time... Thank you again! – Digerkam Jun 11 '18 at 20:53

0 Answers0