Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

"popoverTemplate" and "popoverTemplatePopup" directives #1046

Closed
wants to merge 6 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion src/popover/popover.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,26 @@ 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', [ '$http', '$templateCache', '$compile', function ( $http, $templateCache, $compile ) {
return {
restrict: 'EA',
replace: true,
scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', compileScope: '&' },
templateUrl: 'template/popover/popover-template.html',
link: function( scope, iElement ) {
scope.$watch( 'content', function( templateUrl ) {
if ( !templateUrl ) { return; }
$http.get( templateUrl, { cache: $templateCache } )
.then( function( response ) {
var contentEl = angular.element( iElement[0].querySelector( '.popover-content' ) );
contentEl.children().remove();
contentEl.append( $compile( response.data.trim() )( scope.compileScope() ) );
});
});
}
};
}])
.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
return $tooltip( 'popoverTemplate', 'popover', 'click' );
}]);

17 changes: 13 additions & 4 deletions src/tooltip/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"'+
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With this single and simple line, we are able to provide the "compile scope" to the "popup" directive.

'>'+
'</'+ directiveName +'-popup>';

Expand Down Expand Up @@ -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;

Expand All @@ -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 ); } );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • There is a difference between "detach" and "remove".
  • jqLite does not have "detach", only "remove".
  • This forEach loop above emulates the detach behaviour.
  • Sometimes we need to call remove - it is when the scope is destroyed (see fix(tooltip): make sure tooltip scope is evicted from cache. #486).
  • But by calling "remove" and clearing all data and bindings from the compiled DOM - only to hide the tooltip, without effectively needing to do it - we had the ng-model binding issue.
  • Now, we selectively call "remove" or the "detach" equivalent. The "remove" function is effectively called only when needed (i.e., when the scope is actually being destroyed).

}
}

Expand Down Expand Up @@ -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 );
}
});
}
Expand Down
8 changes: 8 additions & 0 deletions template/popover/popover-template.html
Original file line number Diff line number Diff line change
@@ -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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is sad...
The only difference from "popover.html" to this template is the absence of the ng-bind="content" attribute in this line.
(Doesn't feel nice to have such duplication of code.)

</div>
</div>