如果為了讓popover的支援顯示html語法，可以自行手動新增這個directive。
記錄一下google後的記錄~~
代碼如下：
備註: 0.13版似乎已被merge進主幹了
/*新增一個ui.bootstrap.popover*/
angular.module( 'ui.bootstrap.popover' )
.directive( 'popoverHtmlUnsafePopup', function () {
return {
restrict: 'EA',
replace: true,
scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
template: '
'
};
})
.directive( 'popoverHtmlUnsafe', [ '$tooltip', function ( $tooltip ) {
return $tooltip('popoverHtmlUnsafe', 'popover', 'click' );
}]);
其他用法:
1. 另外在往後的版本還有新增popover-is-open，可以提供更多彈性的控制
Starting with the 0.13.4 release, we've added the ability to programmatically control when your tooltip/popover is open or closed via the tooltip-is-open or popover-is-open attributes.
2. popover-trigger="mouseenter" 提供mouse觸發顯示
3. 手機顯示時，讓popover只維持一個關掉的方法
angular.element(document.body).bind('click', function (e) {
logger.debug('body click from ng');
//Find all elements with the popover attribute
var popups = document.querySelectorAll('*[popover]');
if (popups) {
//Go through all of them
for (var i = 0; i < popups.length; i++) {
//The following is the popover DOM elemet
var popup = popups[i];
//The following is the same jQuery lite element
var popupElement = angular.element(popup);
var content;
var arrow;
if (popupElement.next()) {
//The following is the content child in the popovers first sibling
content = popupElement.next()[0].querySelector('.popover-content');
//The following is the arrow child in the popovers first sibling
arrow = popupElement.next()[0].querySelector('.arrow');
}
//If the following condition is met, then the click does not correspond
//to a click on the current popover in the loop or its content.
//So, we can safely remove the current popover's content and set the
//scope property of the popover
if (popup != e.target && e.target != content && e.target != arrow) {
if (popupElement.next().hasClass('popover')) {
//Remove the popover content
popupElement.next().remove();
//Set the scope to reflect this
popupElement.scope().tt_isOpen = false;
}
}
}
}
});
參考:
http://stackoverflow.com/questions/11703093/how-to-dismiss-a-twitter-bootstrap-popover-by-clicking-outside
https://jsfiddle.net/mattdlockyer/C5GBU/2/
http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/
http://stackoverflow.com/questions/23048990/can-bootstrap-tooltips-be-turned-off-based-on-device-screen-size
http://plnkr.co/edit/fhsy4V?p=preview
https://github.com/angular-ui/bootstrap/issues/618
http://stackoverflow.com/questions/31770019/angular-ui-bootstrap-popover-how-add-a-close-button
