Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@jbruni
Last active December 23, 2015 12:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jbruni/6633055 to your computer and use it in GitHub Desktop.
Save jbruni/6633055 to your computer and use it in GitHub Desktop.
AngularJS UI Bootstrap "Popover Template" PR patch (https://github.com/angular-ui/bootstrap/pull/1046)
diff --git a/src/popover/popover.js b/src/popover/popover.js
index c38ff94..55a2473 100644
--- a/src/popover/popover.js
+++ b/src/popover/popover.js
@@ -14,5 +14,19 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
})
.directive( 'popover', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
return $tooltip( 'popover', 'popover', 'click' );
+}])
+.directive( 'popoverTemplatePopup', [ '$templateCache', '$compile', function ( $templateCache, $compile ) {
+ return {
+ restrict: 'EA',
+ replace: true,
+ scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', compileScope: '&' },
+ templateUrl: 'template/popover/popover-template.html',
+ link: function( scope, iElement ) {
+ iElement.find( 'div.popover-content' )
+ .html( $compile( $templateCache.get( scope.content ) )( scope.compileScope() ) );
+ }
+ };
+}])
+.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
+ return $tooltip( 'popoverTemplate', 'popover', 'click' );
}]);
-
diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
index b75124e..3ee2dcf 100644
--- a/src/tooltip/tooltip.js
+++ b/src/tooltip/tooltip.js
@@ -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"'+
+ 'compile-scope="$parent"'+
'>'+
'</'+ directiveName +'-popup>';
@@ -221,7 +222,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
}
// Hide the tooltip popup element.
- function hide() {
+ function hide( destroy ) {
// First things first: we don't show it anymore.
scope.tt_isOpen = false;
@@ -232,9 +233,17 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
// need to wait for it to expire beforehand.
// FIXME: this is a placeholder for a port of the transitions library.
if ( angular.isDefined( scope.tt_animation ) && scope.tt_animation() ) {
- transitionTimeout = $timeout( function () { tooltip.remove(); }, 500 );
+ transitionTimeout = $timeout( function () { remove( destroy ); }, 500 );
} else {
+ remove( destroy );
+ }
+ }
+
+ function remove( destroy ) {
+ if ( destroy ) {
tooltip.remove();
+ } else {
+ angular.forEach( tooltip, function( e ) { e.parentNode.removeChild( e ); } );
}
}
@@ -299,9 +308,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
// Make sure tooltip is destroyed and removed.
scope.$on('$destroy', function onDestroyTooltip() {
if ( scope.tt_isOpen ) {
- hide();
+ hide( true );
} else {
- tooltip.remove();
+ remove( true );
}
});
}
diff --git a/template/popover/popover-template.html b/template/popover/popover-template.html
new file mode 100644
index 0000000..6f13d8b
--- /dev/null
+++ b/template/popover/popover-template.html
@@ -0,0 +1,8 @@
+<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+ <div class="arrow"></div>
+
+ <div class="popover-inner">
+ <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
+ <div class="popover-content"></div>
+ </div>
+</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment