feat(popover): add html support

src/popover/docs/popover.demo.html

@@ -15,7 +15,7 @@ <h4>Plugin dependency</h4>
     <p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included.</p>
   </div>
 
-  <h3>Live demo <a class="small" href="#" target="_blank"><i class="fa fa-edit" data-title="edit in plunker" data-placement="right" bs-tooltip></i></a></h3>
+  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="popover/docs/popover.demo.html" data-content-js-url="popover/docs/popover.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip><i class="fa fa-edit"></i></a></h3>
   <div class="form-group hide">
     <label>Title</label>
     <input type="text" class="form-control" ng-model="popover.title" placeholder="Title">
@@ -62,7 +62,8 @@ <h3>Options</h3>
   <p>For directives, you can naturally inherit the contextual <code>$scope</code> or leverage a custom one with an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a> to evaluate as an object directly on the <code>bs-popover</code> attribute</p>
   <div class="callout callout-info">
     <h4>This module supports exotic placement options!</h4>
-    <p>You can position your popover in corners (such as <code>bottom-left</code>) or any other combination two. Requires some CSS to render properly.</p>
+    <p>You can position your popover in corners (such as <code>bottom-left</code>) or any other combination two.</p>
+    <p>Exotic placement options are not part of the Bootstrap's core, to use them you must use <code>bootstrap-additions.css</code> from the <a href="//github.com/mgcrea/bootstrap-additions" target="_blank">BootstrapAdditions</a> project. This project being not yet fully released, meanwhile, you can use the <a href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css" target="_blank">development snapshot</a> compiled for theses docs.</p>
   </div>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
@@ -97,15 +98,19 @@ <h4>This module supports exotic placement options!</h4>
           <td>title</td>
           <td>string</td>
           <td>''</td>
-          <td>default title value if
-            <code>title</code>attribute isn't present</td>
+          <td>default title value if <code>title</code>attribute isn't present</td>
         </tr>
         <tr>
           <td>content</td>
           <td>string</td>
           <td>''</td>
-          <td>default content value if
-            <code>data-content</code>attribute isn't present</td>
+          <td>default content value if <code>data-content</code>attribute isn't present</td>
+        </tr>
+        <tr>
+          <td>html</td>
+          <td>boolean</td>
+          <td>false</td>
+          <td>replace <code>ng-bind</code> with <code>ng-bind-html</code>, requires <code>ngSanitize</code> to be loaded</td>
         </tr>
         <tr>
           <td>delay</td>

src/popover/docs/popover.demo.js

@@ -2,6 +2,12 @@
 
 angular.module('mgcrea.ngStrapDocs')
 
+.config(function($popoverProvider) {
+  angular.extend($popoverProvider.defaults, {
+    html: true
+  });
+})
+
 .controller('PopoverDemoCtrl', function($scope) {
   $scope.popover = {title: 'Title', content: 'Hello Popover<br />This is a multiline message!'};
 });

src/popover/popover.js

@@ -7,8 +7,8 @@ angular.module('mgcrea.ngStrap.popover', ['mgcrea.ngStrap.tooltip'])
     var template = '' +
       '<div class="popover" tabindex="-1" ng-show="content" ng-class="{\'in\': $visible}">' +
         '<div class="arrow"></div>' +
-        '<h3 class="popover-title" ng-bind-html="title" ng-show="title"></h3>' +
-        '<div class="popover-content" ng-bind-html="content"></div>' +
+        '<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>' +
+        '<div class="popover-content" ng-bind="content"></div>' +
       '</div>';
 
     $templateCache.put('$popover', template);
@@ -23,10 +23,10 @@ angular.module('mgcrea.ngStrap.popover', ['mgcrea.ngStrap.tooltip'])
       template: '$popover',
       trigger: 'click',
       keyboard: true,
+      html: false,
       title: '',
       content: '',
       delay: 0,
-      // html: false,
       container: false
     };
 
@@ -58,7 +58,7 @@ angular.module('mgcrea.ngStrap.popover', ['mgcrea.ngStrap.tooltip'])
 
         // Directive options
         var options = {scope: scope};
-        angular.forEach(['placement', 'keyboard', 'container', 'delay', 'trigger', 'animation', 'template'], function(key) {
+        angular.forEach(['placement', 'container', 'delay', 'trigger', 'keyboard', 'html', 'animation', 'template'], function(key) {
           if(angular.isDefined(attr[key])) options[key] = attr[key];
         });
 

src/popover/test/popover.spec.js

@@ -26,31 +26,35 @@ describe('popover', function () {
 
   var templates = {
     'default': {
-      scope: {popover: {title: 'Title', content: 'Hello Popover<br>This is a multiline message!'}},
+      scope: {popover: {title: 'Title', content: 'Hello Popover!'}},
       element: '<a class="btn" title="{{popover.title}}" data-content="{{popover.content}}" bs-popover></a>'
     },
     'markup-scope': {
       element: '<a bs-popover="popover">click me</a>'
     },
     'markup-ngRepeat': {
-      scope: {items: [{name: 'foo', popover: {title: 'Title', content: 'Hello Popover<br>This is a multiline message!'}}]},
+      scope: {items: [{name: 'foo', popover: {title: 'Title', content: 'Hello Popover!'}}]},
       element: '<ul><li ng-repeat="item in items"><a class="btn" bs-popover="item.popover">{{item.name}}</a></li></ul>'
     },
     'options-animation': {
-      element: '<a title="{{popover.title}}" data-content="{{popover.content}}" data-animation="animation-flipX" bs-popover>hover me</a>'
+      element: '<a data-animation="animation-flipX" bs-popover="popover">hover me</a>'
     },
     'options-placement': {
-      element: '<a title="{{popover.title}}" data-content="{{popover.content}}" data-placement="bottom" bs-popover>hover me</a>'
+      element: '<a data-placement="bottom" bs-popover="popover">hover me</a>'
     },
     'options-placement-exotic': {
-      element: '<a title="{{popover.title}}" data-content="{{popover.content}}" data-placement="bottom-right" bs-popover>hover me</a>'
+      element: '<a data-placement="bottom-right" bs-popover="popover">hover me</a>'
     },
     'options-trigger': {
-      element: '<a title="{{popover.title}}" data-content="{{popover.content}}" data-trigger="hover" bs-popover>hover me</a>'
+      element: '<a data-trigger="hover" bs-popover="popover">hover me</a>'
+    },
+    'options-html': {
+      scope: {popover: {title: 'Title', content: 'Hello Popover<br>This is a multiline message!'}},
+      element: '<a class="btn" data-html="1" bs-popover="popover"></a>'
     },
     'options-template': {
-      scope: {popover: {title: 'Title', content: 'Hello Popover<br>This is a multiline message!', counter: 0}, items: ['foo', 'bar', 'baz']},
-      element: '<a title="{{popover.title}}" data-content="{{popover.content}}" data-template="custom" bs-popover>click me</a>'
+      scope: {popover: {title: 'Title', content: 'Hello Popover!', counter: 0}, items: ['foo', 'bar', 'baz']},
+      element: '<a data-template="custom" bs-popover="popover">click me</a>'
     }
   };
 
@@ -159,6 +163,17 @@ describe('popover', function () {
 
     });
 
+    describe('html', function () {
+
+      it('should correctly compile inner content', function() {
+        var elm = compileDirective('options-html');
+        angular.element(elm[0]).triggerHandler('click');
+        expect(sandboxEl.find('.popover-title').html()).toBe(scope.popover.title);
+        expect(sandboxEl.find('.popover-content').html()).toBe(scope.popover.content);
+      });
+
+    });
+
     describe('template', function () {
 
       it('should support custom template', function() {