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 vfilter
s log their link run, the one inside the popup fails to log the click event.