[UI-Bootstrap] 讓0.12.1版的popup value支援html

如果為了讓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