From 197319dcfb7585c1c834e30b6301ace2411862f6 Mon Sep 17 00:00:00 2001 From: Josh David Miller Date: Mon, 29 Apr 2013 13:57:32 -0700 Subject: [PATCH] feat(popover): created popover-template directive --- src/popover/docs/demo.html | 9 ++++++++ src/popover/popover.js | 25 +++++++++++++++------- src/tooltip/tooltip.js | 29 +++++++++++++++++++++++++- template/popover/popover-template.html | 6 ++++++ 4 files changed, 61 insertions(+), 8 deletions(-) create mode 100644 template/popover/popover-template.html diff --git a/src/popover/docs/demo.html b/src/popover/docs/demo.html index 2a9bdfb1b4..3785006309 100644 --- a/src/popover/docs/demo.html +++ b/src/popover/docs/demo.html @@ -21,6 +21,15 @@

Triggers

popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="focus" /> + +
+

Custom Templates

+ +

Other

diff --git a/src/popover/popover.js b/src/popover/popover.js index c38ff9461e..8d63a57df7 100644 --- a/src/popover/popover.js +++ b/src/popover/popover.js @@ -1,8 +1,3 @@ -/** - * The following features are still outstanding: popup delay, animation as a - * function, placement as a function, inside, support for more triggers than - * just mouse enter/leave, html popovers, and selector delegatation. - */ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] ) .directive( 'popoverPopup', function () { return { @@ -12,7 +7,23 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] ) templateUrl: 'template/popover/popover.html' }; }) -.directive( 'popover', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) { + +.directive( 'popover', [ '$tooltip', function ( $tooltip ) { return $tooltip( 'popover', 'popover', 'click' ); -}]); +}]) + +.directive( 'popoverTemplatePopup', function () { + return { + restrict: 'EA', + replace: true, + scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', template: '@' }, + templateUrl: 'template/popover/popover-template.html' + }; +}) + +.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) { + return $tooltip( 'popoverTemplate', 'popover', 'click' ); +}]) + +; diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js index 281d532a4a..f714f5adc6 100644 --- a/src/tooltip/tooltip.js +++ b/src/tooltip/tooltip.js @@ -98,7 +98,8 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) 'content="{{tt_content}}" '+ 'placement="{{tt_placement}}" '+ 'animation="tt_animation()" '+ - 'is-open="tt_isOpen"'+ + 'is-open="tt_isOpen" '+ + 'template="{{tt_template}}"'+ '>'+ ''; @@ -266,6 +267,10 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) element.bind( triggers.hide, hideTooltipBind ); } }); + + attrs.$observe( prefix+'Template', function ( val ) { + scope.tt_template = val; + }); } }; }; @@ -298,5 +303,27 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) return $tooltip( 'tooltipHtmlUnsafe', 'tooltip', 'mouseenter' ); }]) +/** + * Loads the provided template via $http, attaches it to the current element, + * and compiles it relative to a new sibling scope. + * + * For internal use only! + */ +.directive( 'ttLoadTemplateInSibling', [ '$http', '$templateCache', '$compile', function ( $http, $templateCache, $compile ) { + return { + link: function ( scope, element, attrs ) { + var templateScope = scope.$parent.$new(); + + attrs.$observe( 'ttLoadTemplateInSibling', function ( val ) { + $http.get( val, { cache: $templateCache } ) + .then( function( response ) { + element.html( response.data ); + $compile( element.contents() )( templateScope ); + }); + }); + } + }; +}]) + ; diff --git a/template/popover/popover-template.html b/template/popover/popover-template.html new file mode 100644 index 0000000000..8cbbb7ef70 --- /dev/null +++ b/template/popover/popover-template.html @@ -0,0 +1,6 @@ +
+
+ +
+
+