Add popoverHtmlUnsafe directive.

src/popover/docs/demo.html

@@ -28,4 +28,7 @@ <h4>Triggers</h4>
     <h4>Other</h4>
     <button Popover-animation="true" popover="I fade in and out!" class="btn btn-default">fading</button>
     <button popover="I have a title!" popover-title="The title." class="btn btn-default">title</button>
+    <p>
+        I can even contain HTML. <a href="#" popover-html-unsafe="{{htmlPopover}}">Check me out!</a>
+    </p>
 </div>

src/popover/docs/demo.js

@@ -1,4 +1,5 @@
 angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
   $scope.dynamicPopover = 'Hello, World!';
   $scope.dynamicPopoverTitle = 'Title';
+  $scope.htmlPopover = 'I\'ve been made <b>bold</b>!';
 });

src/popover/docs/readme.md

@@ -1,6 +1,12 @@
 A lightweight, extensible directive for fancy popover creation. The popover
 directive supports multiple placements, optional transition animation, and more.
 
+There are two versions of the popover: `popover` and `popover-html-unsafe`. The
+former takes text only and will escape any HTML provided. The latter takes
+whatever HTML is provided and displays it in a tooltip; it is called "unsafe"
+because the HTML is not sanitized. *The user is responsible for ensuring the
+content is safe to put into the DOM!*
+
 Like the Bootstrap jQuery plugin, the popover **requires** the tooltip
 module.
 

src/popover/popover.js

@@ -16,4 +16,17 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
 
 .directive( 'popover', [ '$tooltip', function ( $tooltip ) {
   return $tooltip( 'popover', 'popover', 'click' );
-}]);
+}])
+
+.directive( 'popoverHtmlUnsafePopup', function () {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
+    templateUrl: 'template/popover/popover-html-unsafe.html'
+  };
+})
+
+.directive( 'popoverHtmlUnsafe', [ '$tooltip', function ( $tooltip ) {
+  return $tooltip( 'popoverHtmlUnsafe', 'popover', 'click' );
+}]);

src/popover/test/popover.spec.js

@@ -68,4 +68,62 @@ describe('popover', function() {
   }));
 });
 
+describe('popoverHtmlUnsafe', function() {
+  var elm,
+      elmBody,
+      scope,
+      elmScope;
+
+  // load the popover code
+  beforeEach(module('ui.bootstrap.popover'));
+
+  // load the template
+  beforeEach(module('template/popover/popover-html-unsafe.html'));
+
+  beforeEach(inject(function($rootScope, $compile) {
+    scope = $rootScope;
+    scope.html = 'I say: <strong class="hello">Hello!</strong>';
+
+    elmBody = angular.element(
+        '<div><span popover-html-unsafe="{{html}}">Selector Text</span></div>'
+    );
+
+    $compile(elmBody)(scope);
+    scope.$digest();
+    elm = elmBody.find('span');
+    elmScope = elm.scope();
+  }));
+
+  it('should not be open initially', inject(function() {
+    expect( elmScope.tt_isOpen ).toBe( false );
+
+    // We can only test *that* the popover-popup element wasn't created as the
+    // implementation is templated and replaced.
+    expect( elmBody.children().length ).toBe( 1 );
+  }));
+
+  it( 'should render html properly', inject( function () {
+    elm.trigger( 'click' );
+    expect( elmBody.find('.popover-content').html() ).toBe( scope.html );
+  }));
+
+
+  it('should open on click', inject(function() {
+    elm.trigger( 'click' );
+    expect( elmScope.tt_isOpen ).toBe( true );
+
+    // We can only test *that* the popover-popup element was created as the
+    // implementation is templated and replaced.
+    expect( elmBody.children().length ).toBe( 2 );
+  }));
+
+  it('should close on second click', inject(function() {
+    elm.trigger( 'click' );
+    elm.trigger( 'click' );
+    expect( elmScope.tt_isOpen ).toBe( false );
+  }));
+
+});
+
+
 

src/tooltip/docs/readme.md

@@ -3,7 +3,7 @@ directive supports multiple placements, optional transition animation, and more.
 
 There are two versions of the tooltip: `tooltip` and `tooltip-html-unsafe`. The
 former takes text only and will escape any HTML provided. The latter takes
-whatever HTML is provided and displays it in a tooltip; it called "unsafe"
+whatever HTML is provided and displays it in a tooltip; it is called "unsafe"
 because the HTML is not sanitized. *The user is responsible for ensuring the
 content is safe to put into the DOM!*
 

template/popover/popover-html-unsafe.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" bind-html-unsafe="content"></div>
+  </div>
+</div>