使用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关闭自定义指令弹出框

回答

相关问题