<div overlay config="overlayConfig">
<div class="dismiss-buttons">
<button class="btn btn-default" ng-click="subscriptions()">Save</button>
</div>
</div>
app.directive("Overlay", ["$timeout", "$compile", function($timeout, $compile) {
return {
restrict: "A",
transclude: true,
scope: {
config: "="
},
template: "<div class='overlay'><div ng-transclude></div></div>",
link: function(scope, iElement, iAttrs, ctrl, transclude) {
iElement = iElement.find(".ehn-overlay");
$(document.body).append(iElement);
scope.$watchCollection("config", function(value) {
if (scope.config.isVisible === false) {
iElement.remove();
} else {
$(document.body).append(iElement);
}
});
}
};
}]);
Is there a way to resolve the issue of ng-click not triggering after appending the overlay to the body multiple times? I suspect that the element may not be getting compiled properly. Any suggestions to fix this problem?