title: Angular transclude in a directive containing a ng-template (generic Confirm Modal)
body: <p>Hello I'm struggling while creating a generic confirmation directive based on angular-bootstrap Modal directive.</p>
  
  <p>I can't find a way to transclude my content in the ng-template used for the modal construction because the <code>ng-transclude</code> directive isn't evaluated since it's part of a <code>ng-template</code> loaded afterward when executing <code>$modal.open()</code> :</p>
  
  <p><strong>index.html (directive insertion) :</strong></p>
  
  <pre><code>&lt;confirm-popup
      is-open="openConfirmation"
      on-confirm="onPopupConfirmed()"
      on-cancel="onPopupCanceled()"
  &gt;
  Are you sure ? (modal #{{index}})
  </code></pre>
  
  <p></p>
  
  <p><strong>confirmPopup.html (directive template) :</strong></p>
  
  <pre><code>&lt;script type="text/ng-template" id="confirmModalTemplate.html"&gt;
      &lt;div&gt;
          &lt;div class="modal-header"&gt;
              &lt;h3&gt;Confirm ?&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              {{directiveTranscludedContent}} // ng-transclude do not work here
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
              &lt;button class="btn btn-primary" ng-click="ok()"&gt;Validate&lt;/button&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>confirmPopup.js (directive JS) :</strong></p>
  
  <pre><code>.directive('confirmPopup', [
      function() {
          return {
              templateUrl: 'confirmPopup.html',
              restrict: 'EA',
              replace: true,
              transclude: true,
              scope: {
                  isOpen: '=',
                  confirm: "&amp;onConfirm",
                  cancel: "&amp;onCancel"
              },
              controller: ['$scope', '$element', '$modal', '$transclude', '$compile', function($scope, $element, $modal, $transclude, $compile) {
  
                // watching isOpen attribute to dispay modal when needed
                  $scope.$watch(
                      function() {
                          return $scope.isOpen;
                      },
                      function(newValue) {
                          if (newValue === true) {
                              openModal();
                          } else {
                              // if a modal is already dispayed : the modal must be canceled/confirmed by the user
                              // else (if no modal is dispayed), then do nothing
                          }
                      }
                  );
  
                  // open modal function
                  // create / register ok/cancel callbacks
                  // and open modal
                  // all on one shot
                  function openModal() {
  
                      $modal.open({
                          templateUrl: 'confirmModalTemplate.html',
                          controller: ['$scope', '$modalInstance', 'content', function($scope, $modalInstance, content) {
  
                              $scope.directiveTranscludedContent = content;
  
                              $scope.ok = function() {
                                  $modalInstance.close();
                              };
  
                              $scope.cancel = function() {
                                  $modalInstance.dismiss();
                              };
                          }],
                          resolve: {
                              content: function() {
                                  return $transclude().html();
                                        //return $compile($transclude().contents())($scope);
                              },
                          }
                      })
                      .result.then(
                          // modal has been validated
                          function() {
                              $scope.confirm();
                          },
                          // modal has been dismissed
                          function() {
                              if ($scope.cancel) {
                                  $scope.cancel();
                              }
                          }
                      );
                  };
              }]
          };
      }
  ]);
  </code></pre>
  
  <p>If it's not clear enough, see this <a href="http://plnkr.co/edit/SAvygsN0P56u5kwBQxOC?p=preview" rel="nofollow">PLUNKER</a> where I'm waiting to see "<code>Are you sure ? (modal #2)</code>" only when clicking on the "<code>open confirm modal #2</code>" button.</p>