カスタムディレクティブのポップオーバーを閉じるにはoutsideClickを使用してください

Question

私は、アイコンをクリックまたはホバーすると開くカスタムディレクティブとしてポップオーバーを持っています。アイコンをクリックすると、ポップオーバーがスティックされ、アイコンをもう一度クリックすると閉じます。今度はポップオーバー以外の場所をクリックしてクリックした後でポップオーバーを閉じたいと思っています。以下は、私が外でクリックしたときにポップオーバーを閉じ有効にするために何をする必要があるかを教えてください私のコード...

MY CUSTOMディレクティブ

(function() { 
    'use strict'; 

    angular.module('frontend.core.directives') 
    .directive('myPopover', [ 
     function directive() { 
     return { 
      restrict: 'E', 
      templateUrl: '/frontend/core/directives/my-popover/my-popover.html', 
      scope: { 
      trigger: '@', 
      title:'@' 
      }, 
      transclude: true, 
      link: function (scope, elm, attrs) { 
      //Need to hide content first 
      elm.hide(); 
      //plugin binder 
      $(scope.trigger).popover({ 
       html: true, 
       trigger: 'hover click', 
       placement: 'auto', 
       content: function() { 
       return elm.html(); 
       }, 
       title: function() { 
       return scope.title; 
       } 
      }); 

      } 
     }; 
     } 
    ]); 
}()); 

MY HTML

<div> 
<i id="touch-details" class="fa fa-info-circle"></i> 
<my-popover trigger="#touch-details" my-popover-trigger="outsideClick" title="Details"> 
    <span> 
     Inside of my popover 
    </span> 
</my-popover> 
</div> 

です。

Answer 1

実際の答えが既に作成されました。 Angular構文に一致させるためにちょっと微調整するだけでした。したがって、 '$'は 'angular.element'に変更されました。例えば ...

$('body').on('click' 

は

angular.element('body').on('click' 

あなたのポップオーバーは、その背後にあるオーバーレイのいくつかの並べ替えを持っている場合は常に、

http://jsfiddle.net/raving/jpsmegvL/

Answer 2

$ドキュメントをあなたの指示に注入して、イベントが天気予報をコントロールしているかどうかを確認するには、クリックがポップアップを保持しているdivの内側かdivの外側にあるかどうかを確認します。したがって、このような何か：

angular.module('frontend.core.directives') 
    .directive('myPopover', [ 
     function directive($document) { 

.......

$document.on('click', function(event){ 

    event.originalEvent //This holds among other things where the click was made. If click was not made in the div containing the popup, then take an action 
}); 

は、それがどの、あなたは、プロパティフォーカスを割り当てることができポップオーバー・トリガーと呼ばれるプロパティがあり

Answer 3

を役に立てば幸いぼかしイベントで、あなたが望むように動作します。また、ブートストラップUIを使えば、簡単に、この例のようにangularjsとブートストラップのポップオーバーとツールチップを使用することができます。

<button popover-placement="top" 
     popover-title="Hello Word!" 
     popover-class = "someClass" 
     popover-trigger = "focus" 
     uib-popover="I appeared on blur!" 
     type="button" class="btn btn-default"> 
     Check 
</button>