feat(popover): Adds unsafe html option for popover

This Feature enables the User to add HTML-Formatted Content to a popover

See: Issue angular-ui#520

Author: Dominik Gätjens

src/popover/docs/demo.html

@@ -26,6 +26,7 @@ <h4>Triggers</h4>
       <h4>Other</h4>
       <button Popover-animation="true" popover="I fade in and out!" class="btn">fading</button>
       <button popover="I have a title!" popover-title="The title." class="btn">title</button>
+      <button popover-html-unsafe="<b>Hello</b> Foobar" popover-title="The title." class="btn">With HTML-Body</button>
     </div>
   </div>
 </div>

src/popover/docs/readme.md

@@ -17,6 +17,7 @@ will display:
   `tooltip` directive for supported values.
 - `popover-append-to-body`: Should the tooltip be appended to `$body` instead of
   the parent element?
+- `popover-html-unsafe`: To add HTML-Content to the popover body.
 
 The popover directives require the `$position` service.
 

src/popover/popover.js

@@ -14,5 +14,17 @@ 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( 'popoverHtmlUnsafePopup', function () {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
+    templateUrl: 'template/popover/popover-html-unsafe-popup.html'
+  };
+})
+
+.directive( 'popoverHtmlUnsafe', [ '$tooltip', function ( $tooltip ) {
+  return $tooltip( 'popoverHtmlUnsafe', 'popover', 'click' );
+}]);

src/popover/test/popoverSpec.js

@@ -46,4 +46,50 @@ 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-popup.html'));
+
+  beforeEach(inject(function($rootScope, $compile) {
+    elmBody = angular.element(
+      '<div><span popover-html-unsafe="<b> text </b>">Selector Text</span></div>'
+    );
+
+    scope = $rootScope;
+    $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 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 );
+  }));
+});

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