feat(popover): created popover-template directive

src/popover/docs/demo.html

@@ -21,6 +21,15 @@ <h4>Triggers</h4>
         popover="I appeared on focus! Click away and I'll vanish..." 
         popover-trigger="focus" />
     </div>
+    <script type="text/ng-template" id="mypopover.tpl.html">
+      <div class="popover-content">
+        <h3>Hello!</h3>
+      </div>
+    </script>
+    <div>
+      <h4>Custom Templates</h4>
+      <button popover-template="mypopover.tpl.html" class="btn">Open!</button>
+    </div>
     <div>
       <h4>Other</h4>
       <button Popover-animation="true" popover="I fade in and out!" class="btn">fading</button>

src/popover/popover.js

@@ -1,8 +1,3 @@
-/**
- * The following features are still outstanding: popup delay, animation as a
- * function, placement as a function, inside, support for more triggers than
- * just mouse enter/leave, html popovers, and selector delegatation.
- */
 angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
 .directive( 'popoverPopup', function () {
   return {
@@ -12,7 +7,23 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
     templateUrl: 'template/popover/popover.html'
   };
 })
-.directive( 'popover', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
+
+.directive( 'popover', [ '$tooltip', function ( $tooltip ) {
   return $tooltip( 'popover', 'popover', 'click' );
-}]);
+}])
+
+.directive( 'popoverTemplatePopup', function () {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', template: '@' },
+    templateUrl: 'template/popover/popover-template.html'
+  };
+})
+
+.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
+  return $tooltip( 'popoverTemplate', 'popover', 'click' );
+}])
+
+;
 

src/tooltip/tooltip.js

@@ -98,7 +98,8 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
           'content="{{tt_content}}" '+
           'placement="{{tt_placement}}" '+
           'animation="tt_animation()" '+
-          'is-open="tt_isOpen"'+
+          'is-open="tt_isOpen" '+
+          'template="{{tt_template}}"'+
           '>'+
         '</'+ directiveName +'-popup>';
 
@@ -266,6 +267,10 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
               element.bind( triggers.hide, hideTooltipBind );
             }
           });
+
+          attrs.$observe( prefix+'Template', function ( val ) {
+            scope.tt_template = val;
+          });
         }
       };
     };
@@ -298,5 +303,27 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
   return $tooltip( 'tooltipHtmlUnsafe', 'tooltip', 'mouseenter' );
 }])
 
+/**
+ * Loads the provided template via $http, attaches it to the current element,
+ * and compiles it relative to a new sibling scope.
+ *
+ * For internal use only!
+ */
+.directive( 'ttLoadTemplateInSibling', [ '$http', '$templateCache', '$compile', function ( $http, $templateCache, $compile ) {
+  return {
+    link: function ( scope, element, attrs ) {
+      var templateScope = scope.$parent.$new();
+
+      attrs.$observe( 'ttLoadTemplateInSibling', function ( val ) {
+        $http.get( val, { cache: $templateCache } )
+        .then( function( response ) {
+          element.html( response.data );
+          $compile( element.contents() )( templateScope );
+        });
+      });
+    }
+  };
+}])
+
 ;
 

template/popover/popover-template.html

@@ -0,0 +1,6 @@
+<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+  <div class="arrow"></div>
+
+  <div class="popover-inner" tt-load-template-in-sibling="{{template}}"></div>
+</div>
+