feat(popover): support template url for partial

src/popover/popover.js

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

src/tooltip/tooltip.js

@@ -64,7 +64,8 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
    * Returns the actual instance of the $tooltip service.
    * TODO support multiple triggers
    */
-  this.$get = [ '$window', '$compile', '$timeout', '$document', '$position', '$interpolate', function ( $window, $compile, $timeout, $document, $position, $interpolate ) {
+  this.$get = [ '$window', '$compile', '$timeout', '$document', '$position', '$interpolate', '$http', '$templateCache',
+  function ( $window, $compile, $timeout, $document, $position, $interpolate, $http, $templateCache ) {
     return function $tooltip ( type, prefix, defaultTriggerShow ) {
       var options = angular.extend( {}, defaultOptions, globalOptions );
 
@@ -102,6 +103,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
           'placement="'+startSym+'placement'+endSym+'" '+
           'animation="animation" '+
           'is-open="isOpen"'+
+          'template="template"'+
           '>'+
         '</div>';
 
@@ -118,6 +120,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             var appendToBody = angular.isDefined( options.appendToBody ) ? options.appendToBody : false;
             var triggers = getTriggers( undefined );
             var hasEnableExp = angular.isDefined(attrs[prefix+'Enable']);
+            var hasTemplateObserver = false;
             var ttScope = scope.$new(true);
 
             var positionTooltip = function () {
@@ -193,9 +196,18 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
 
               positionTooltip();
 
-              // And show the tooltip.
-              ttScope.isOpen = true;
-              ttScope.$digest(); // digest required as $apply is not called
+              if ( hasTemplateObserver ) {
+                loadTemplate();
+              } else {
+                attrs.$observe( 'popoverTemplate', loadTemplate );
+                hasTemplateObserver = true;
+              }
+
+              if ( ! attrs.popoverTemplate ) {
+                // And show the tooltip.
+                ttScope.isOpen = true;
+                ttScope.$digest(); // digest required as $apply is not called
+              }
 
               // Return positioning function as promise callback for correct
               // positioning after draw.
@@ -276,6 +288,19 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
               ttScope.title = val;
             });
 
+            function loadTemplate() {
+              if ( !attrs.popoverTemplate ) { return; }
+              $http.get( attrs.popoverTemplate, { cache: $templateCache } )
+              .then( function ( response ) {
+                ttScope.template = $compile( response.data.trim() )( ttScope.$parent );
+                ttScope.isOpen = true;
+                $timeout(function() {
+                  positionTooltip();
+                  ttScope.$digest();
+                });
+              });
+            }
+
             function prepPlacement() {
               var val = attrs[ prefix + 'Placement' ];
               ttScope.placement = angular.isDefined( val ) ? val : options.placement;

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>