diff --git a/src/popover/popover.js b/src/popover/popover.js index 2bea0a3e10..5bc9f33b08 100644 --- a/src/popover/popover.js +++ b/src/popover/popover.js @@ -16,4 +16,25 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] ) .directive( 'popover', [ '$tooltip', function ( $tooltip ) { return $tooltip( 'popover', 'popover', 'click' ); +}]) + +.directive( 'popoverTemplatePopup', [ function () { + return { + restrict: 'EA', + replace: true, + scope: { title: '@', template: '=', placement: '@', animation: '&', isOpen: '&' }, + templateUrl: 'template/popover/popover-template.html', + link: function( scope, iElement ) { + var contentEl = angular.element( iElement[0].querySelector( '.popover-content' ) ); + scope.$watch( 'template', function( template ) { + if ( !template ) { return; } + contentEl.children().remove(); + contentEl.append( template ); + }); + } + }; +}]) + +.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) { + return $tooltip( 'popoverTemplate', 'popover', 'click' ); }]); diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js index de6d66dc16..f38b7b1903 100644 --- a/src/tooltip/tooltip.js +++ b/src/tooltip/tooltip.js @@ -64,7 +64,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap * Returns the actual instance of the $tooltip service. * TODO support multiple triggers */ - this.$get = [ '$window', '$compile', '$timeout', '$parse', '$document', '$position', '$interpolate', function ( $window, $compile, $timeout, $parse, $document, $position, $interpolate ) { + this.$get = [ '$window', '$compile', '$timeout', '$parse', '$document', '$position', '$interpolate', '$http', '$templateCache', function ( $window, $compile, $timeout, $parse, $document, $position, $interpolate, $http, $templateCache ) { return function $tooltip ( type, prefix, defaultTriggerShow ) { var options = angular.extend( {}, defaultOptions, globalOptions ); @@ -102,6 +102,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap 'placement="'+startSym+'tt_placement'+endSym+'" '+ 'animation="tt_animation" '+ 'is-open="tt_isOpen"'+ + 'template="tt_template"'+ '>'+ ''; @@ -186,7 +187,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap // Set the initial positioning. tooltip.css({ top: 0, left: 0, display: 'block' }); - // Now we add it to the DOM because need some info about it. But it's not + // Now we add it to the DOM because need some info about it. But it's not // visible yet anyway. if ( appendToBody ) { $document.find( 'body' ).append( tooltip ); @@ -214,7 +215,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap $timeout.cancel( popupTimeout ); popupTimeout = null; - // And now we remove it from the DOM. However, if we have animation, we + // And now we remove it from the DOM. However, if we have animation, we // need to wait for it to expire beforehand. // FIXME: this is a placeholder for a port of the transitions library. if ( scope.tt_animation ) { @@ -269,6 +270,14 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap scope.tt_popupDelay = ! isNaN(delay) ? delay : options.popupDelay; }); + attrs.$observe( 'popoverTemplate', function ( val ) { + if ( !val ) { return; } + $http.get( val, { cache: $templateCache } ) + .then( function ( response ) { + scope.tt_template = $compile( response.data.trim() )( scope.$parent ); + }); + }); + var unregisterTriggers = function () { element.unbind(triggers.show, showTooltipBind); element.unbind(triggers.hide, hideTooltipBind); diff --git a/template/popover/popover-template.html b/template/popover/popover-template.html new file mode 100644 index 0000000000..6f13d8b96f --- /dev/null +++ b/template/popover/popover-template.html @@ -0,0 +1,8 @@ +
+
+ +
+

+
+
+