使用outsideClick關閉自定義指令彈出框

我有一個彈出式窗口作爲自定義指令，當單擊或懸停圖標時打開。點擊圖標後，彈出窗口會粘住，如果再次單擊該圖標，將關閉。現在，我想通過單擊其他任何位置（但彈出窗口）來關閉彈出窗口。下面是我的代碼...使用outsideClick關閉自定義指令彈出框

我的自定義DIRECTIVE

(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; 
       } 
      }); 

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

我的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>

請告訴我，我需要做的，以使外界點擊關閉時的酥料餅。

來源

2016-03-18 Kandianne Pierre

如果你的酥料餅有某種背後疊加的，你總是可以檢查該覆蓋圖是否已被點擊。例如：'overlay.on（'click'，function（）{myPopover.close（）;}）;'在你的指令中 –

其實答案已經創建。只需稍微調整一下以匹配Angular語法即可。所以'$'被改爲'angular.element'。例如...

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

相當於

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

見鏈接...

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

來源

2016-03-23 22:25:14

嘗試將 $文檔注入到您的指令中，並在事件天氣中控制點擊處於彈出窗口或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 
});

希望它可以幫助

來源

2016-03-18 17:50:33 jstuartmilne

有可分配屬性焦點的屬性叫酥料餅的觸發器，其按照你想要的方式工作，模糊事件。此外，用戶界面，引導您可以輕鬆地在這個例子中使用的引導與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>

來源

2016-03-18 21:21:41 Yoan

使用outsideClick關閉自定義指令彈出框

回答

相關問題