Compiling transclusion templates

Question

<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);
                }

            });

        }

    };
}]);

I need to append the overlay to the body and once its done remove it. It works for the first time but next time when I append it does not trigger ng-click, so I assume that its not getting compiled. Can someone give a solution out here?

Answer 1

I tried to reproduce your problem, but I cannot. Here is working Plunker.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.name = 'World';

  $scope.config = {
    isVisible: false
  };

  $scope.do = function() {
    $scope.config.isVisible = true;
    $timeout(function() { 
      $scope.config.isVisible = false;
    }, 2000);
  };
});

app.directive("overlay", ["$timeout", "$compile", function($timeout, $compile) {
    return {
        restrict: "A",
        transclude: true,
        scope: {
            config: "="
        },
        template: "<div><div ng-transclude></div></div>",
        link: function(scope, iElement, iAttrs, ctrl, transclude) {
            iElement = iElement.find(".overlay");
            $(document.body).append(iElement);

            scope.$watchCollection("config", function(value) {
                if (scope.config.isVisible === false) {
                    iElement.remove();
                } else {
                    $(document.body).append(iElement);
                }

            });

        }

    };
}]);

View:

<div overlay config="config">
      <div class="overlay"></div>
      <div class="dismiss-buttons">
        <button class="btn btn-default" ng-click="do()">Save</button>
      </div>
    </div>

A few remarks:

1. Don't mix jQuery with AngularJs - this results in untestable code (and few other problems)
2. There is many overlays created specifically for angularjs using one of them is good idea (unless you are learning angularjs)

Here is another overlay in Plunker, a bit more angular way.