diff --git a/src/popover/docs/demo.html b/src/popover/docs/demo.html index 8955b1918e..b980ac6a83 100644 --- a/src/popover/docs/demo.html +++ b/src/popover/docs/demo.html @@ -28,4 +28,7 @@
+ I can even contain HTML. Check me out! +
diff --git a/src/popover/docs/demo.js b/src/popover/docs/demo.js index 6cce89812b..3b68e173af 100644 --- a/src/popover/docs/demo.js +++ b/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 bold!'; }); diff --git a/src/popover/docs/readme.md b/src/popover/docs/readme.md index cbac5f3d26..ccc8895d7b 100644 --- a/src/popover/docs/readme.md +++ 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. diff --git a/src/popover/popover.js b/src/popover/popover.js index 2bea0a3e10..2a6a42565a 100644 --- a/src/popover/popover.js +++ b/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' ); +}]); \ No newline at end of file diff --git a/src/popover/test/popover.spec.js b/src/popover/test/popover.spec.js index 7e6f2b3970..5754f3cfb4 100644 --- a/src/popover/test/popover.spec.js +++ b/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: Hello!'; + + elmBody = angular.element( + '