popover-template directive - addresses issue #220

src/popover/popover.js

@@ -16,4 +16,29 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
 
 .directive( 'popover', [ '$tooltip', function ( $tooltip ) {
   return $tooltip( 'popover', 'popover', 'click' );
+}])
+
+.directive( 'popoverTemplatePopup', [ '$http', '$templateCache', '$compile', '$timeout', function ( $http, $templateCache, $compile, $timeout ) {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', compileScope: '&' },
+    templateUrl: 'template/popover/popover-template.html',
+    link: function( scope, iElement ) {
+      scope.$watch( 'content', function( templateUrl ) {
+        if ( !templateUrl ) { return; }
+        $http.get( templateUrl, { cache: $templateCache } )
+        .then( function( response ) {
+          var contentEl = angular.element( iElement[0].querySelector( '.popover-content' ) );
+          contentEl.children().remove();
+          contentEl.append( $compile( response.data.trim() )( scope.compileScope() ) );
+          $timeout( function(){ scope.compileScope().$digest(); } );
+        });
+      });
+    }
+  };
+}])
+
+.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
+  return $tooltip( 'popoverTemplate', 'popover', 'click' );
 }]);

src/tooltip/tooltip.js

@@ -102,6 +102,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
           'placement="'+startSym+'tt_placement'+endSym+'" '+
           'animation="tt_animation" '+
           'is-open="tt_isOpen"'+
+          'compile-scope="$parent"'+
           '>'+
         '</div>';
 
@@ -260,18 +261,27 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             function createTooltip() {
               // There can only be one tooltip element per directive shown at once.
               if (tooltip) {
-                removeTooltip();
+                return;
               }
               tooltip = tooltipLinker(scope, function () {});
 
               // Get contents rendered into the tooltip
               scope.$digest();
             }
 
-            function removeTooltip() {
+            function removeTooltip( destroy ) {
               if (tooltip) {
-                tooltip.remove();
-                tooltip = null;
+                if (destroy) {
+                  tooltip.remove();
+                  tooltip = null;
+                } else {
+                  // equals to "tooltip.detach();"
+                  angular.forEach( tooltip, function( e ) {
+                    if (e.parentNode) {
+                      e.parentNode.removeChild( e );
+                    }
+                  } );
+                }
               }
             }
 
@@ -344,7 +354,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
               $timeout.cancel( transitionTimeout );
               $timeout.cancel( popupTimeout );
               unregisterTriggers();
-              removeTooltip();
+              removeTooltip( true );
             });
           };
         }

template/popover/popover-template.html

@@ -0,0 +1,8 @@
+<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+  <div class="arrow"></div>
+
+  <div class="popover-inner">
+      <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
+      <div class="popover-content"></div>
+  </div>
+</div>