[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

[UI-Bootstrap] 小踩雷筆記 Tabset元件的scope操作

記錄一下使用Tabset取得控制child scope變數的筆記：
由於Tabset會建立child scope，
所以想要存在tab內部的scope變化除了用 $parent.scope變數 (如果又巢狀的scope可能會發生錯誤例外)，
也可以在parent controller宣告一致的變數，就能方便取值了。
以下這個Tabset的範例可以參考:
http://plnkr.co/edit/vclolFBfF7QMQAQgNmiL?p=preview


範例目的：
Justified這個tab裡面的input，一但值被改變，外面的parent scope會一起連動。

在tabset內綁定了一個parent scope宣告的model(model.selection)

<div ng-controller="TabsDemoCtrl">
  {{model.selection}}
  <tabset>
    <tab heading="Justified">
      <input ng-model="model.selection">
    </tab>
  </tabset>
</div>

宣告一個model的物件在parent scope，所以當tab裡面的input變動時，就容易取到變動的值了。

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:"Dynamic Title 1", content:"Dynamic content 1" },
    { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
  ];

  $scope.model = {selection: ''};
  $scope.options = ['a', 'b', 'c', 'd'];

  $scope.alertMe = function() {
    setTimeout(function() {
      alert("You've selected the alert tab!");
    });
  };

  $scope.navType = 'pills';
};

https://github.com/angular/angular.js/wiki/Understanding-Scopes
https://github.com/angular-ui/bootstrap/issues/1553