0

I have created a simple test page in order to show m problem.

<html>
<head>
<link href="http://www.cloud-eight.com/github/litebox/assets/css/litebox.css" type="text/css" rel="stylesheet">
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <test></test>
        <div vfilter>This works</div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://www.cloud-eight.com/github/litebox/assets/js/litebox.min.js"></script>
<script src="http://www.cloud-eight.com/github/litebox/assets/js/images-loaded.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.directive('test', function () {
    return {
        template: '<div href="#searchPopup" target="_self" class="popup">Click Me...<div style="display: none;"><div id="searchPopup">Hello World...<div vfilter>This doesn\'t</div></div></div></div>',
        replace: true,
        scope: false,
        link: function (scope, element, attrs) {
            element.liteBox({
                revealSpeed: 400,
                overlayClose: true,
                escKey: true,
                navKey: true,
                callbackInit: function () { },
                callbackBeforeOpen: function () { },
                callbackAfterOpen: function () { },
                callbackBeforeClose: function () { },
                callbackAfterClose: function () { },
                callbackError: function () { },
                callbackPrev: function () { },
                callbackNext: function () { },
                errorMessage: 'Error loading content.'
            });
        }
    };
});
myApp.directive('vfilter', [ function () {
    return {
        restrict: 'A',
        scope: false,
        link: function (scope, element, attrs) {
            console.log('linked');

            element.bind('click', function () {
                console.log('clicked');
            });
        }
    }
}]);
myApp.controller('mainCtrl', [function ($scope) {
    console.log('controller loaded');
}]);


</script>
</body>
</html>

I also have this fiddle.

I have a directive vilter in my sample. It does adds a binding on the click event that will log on console. For test reasons I make it to log its link working.

I also have another directive that will popup a div. I place the vfilter directive both in the main body and in the popup directive.

While both vfilters log their link run, the one inside the popup fails to log the click event.

Fjodr
  • 919
  • 13
  • 32
Giannis Paraskevopoulos
  • 18,261
  • 1
  • 49
  • 69

1 Answers1

0

I managed to solve this by checking this post

In my directive which would call litebox i added this code in the callbackAfterOpen:

$compile($('.litebox-overlay').contents())(scope);

This made it work.

Community
  • 1
  • 1
Giannis Paraskevopoulos
  • 18,261
  • 1
  • 49
  • 69