popover-template directive - addresses issue #220

src/popover/popover.js

@@ -14,5 +14,27 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
 })
 .directive( 'popover', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
   return $tooltip( 'popover', 'popover', 'click' );
+}])
+.directive( 'popoverTemplatePopup', [ '$http', '$templateCache', '$compile', function ( $http, $templateCache, $compile ) {
+  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() ) );
+        });
+      });
+    }
+  };
+}])
+.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"'+
           '>'+
         '</'+ directiveName +'-popup>';
 
@@ -224,7 +225,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
           }
 
           // Hide the tooltip popup element.
-          function hide() {
+          function hide( destroy ) {
             // First things first: we don't show it anymore.
             scope.tt_isOpen = false;
 
@@ -236,10 +237,19 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             // FIXME: this is a placeholder for a port of the transitions library.
             if ( scope.tt_animation ) {
               transitionTimeout = $timeout(function () {
-                tooltip.remove();
+                remove( destroy );
               }, 500);
             } else {
+              remove( destroy );
+            }
+          }
+
+          function remove( destroy ) {
+            if ( destroy ) {
               tooltip.remove();
+            } else {
+              // corresponds to jQuery's "detach" (should be included in jqLite?)
+              angular.forEach( tooltip, function( e ) { e.parentNode.removeChild( e ); } );
             }
           }
 
@@ -308,7 +318,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
           // Make sure tooltip is destroyed and removed.
           scope.$on('$destroy', function onDestroyTooltip() {
             $timeout.cancel( popupTimeout );
-            tooltip.remove();
+            remove( true );
             tooltip.unbind();
             tooltip = null;
             $body = null;

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>