From 865ed2f1a30963cb0b6f451549f7761943b41732 Mon Sep 17 00:00:00 2001 From: J Bruni Date: Thu, 19 Mar 2015 11:56:02 +0000 Subject: [PATCH] feat(popover): support template url for partial --- src/popover/popover.js | 21 ++++++++++++++++ src/tooltip/tooltip.js | 33 ++++++++++++++++++++++---- template/popover/popover-template.html | 8 +++++++ 3 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 template/popover/popover-template.html 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 70932db2b0..3c32503f87 100644 --- a/src/tooltip/tooltip.js +++ b/src/tooltip/tooltip.js @@ -64,7 +64,8 @@ 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', '$document', '$position', '$interpolate', function ( $window, $compile, $timeout, $document, $position, $interpolate ) { + this.$get = [ '$window', '$compile', '$timeout', '$document', '$position', '$interpolate', '$http', '$templateCache', + function ( $window, $compile, $timeout, $document, $position, $interpolate, $http, $templateCache ) { return function $tooltip ( type, prefix, defaultTriggerShow ) { var options = angular.extend( {}, defaultOptions, globalOptions ); @@ -102,6 +103,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap 'placement="'+startSym+'placement'+endSym+'" '+ 'animation="animation" '+ 'is-open="isOpen"'+ + 'template="template"'+ '>'+ ''; @@ -118,6 +120,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap var appendToBody = angular.isDefined( options.appendToBody ) ? options.appendToBody : false; var triggers = getTriggers( undefined ); var hasEnableExp = angular.isDefined(attrs[prefix+'Enable']); + var hasTemplateObserver = false; var ttScope = scope.$new(true); var positionTooltip = function () { @@ -193,9 +196,18 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap positionTooltip(); - // And show the tooltip. - ttScope.isOpen = true; - ttScope.$digest(); // digest required as $apply is not called + if ( hasTemplateObserver ) { + loadTemplate(); + } else { + attrs.$observe( 'popoverTemplate', loadTemplate ); + hasTemplateObserver = true; + } + + if ( ! attrs.popoverTemplate ) { + // And show the tooltip. + ttScope.isOpen = true; + ttScope.$digest(); // digest required as $apply is not called + } // Return positioning function as promise callback for correct // positioning after draw. @@ -276,6 +288,19 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap ttScope.title = val; }); + function loadTemplate() { + if ( !attrs.popoverTemplate ) { return; } + $http.get( attrs.popoverTemplate, { cache: $templateCache } ) + .then( function ( response ) { + ttScope.template = $compile( response.data.trim() )( ttScope.$parent ); + ttScope.isOpen = true; + $timeout(function() { + positionTooltip(); + ttScope.$digest(); + }); + }); + } + function prepPlacement() { var val = attrs[ prefix + 'Placement' ]; ttScope.placement = angular.isDefined( val ) ? val : options.placement; 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 @@ +
+
+ +
+

+
+
+