在弹出框之外单击时隐藏弹出框答案

【问题标题】：hide popover when clicked outside of it在弹出框之外单击时隐藏弹出框
【发布时间】：2015-12-19 09:18:37
【问题描述】：

这是我的 popover html 代码：

<a data-placement="bottom"  style="float:right;margin-right:20px;" id="new-quote-popover" popover><img src="img/user.png"/>&nbsp;<b>{{UserName}}</b>
   <div id="popover-head" class="hide">USER DETAILS</div>
   <div id="popover-content" class="hide">

       <div class="row smallMargin">
           <div class="col-sm-4">
              varun
           </div>
           <div class="col-sm-8">
               <select name="selectopt"  style="width:80%">
                      <option value="001">001</option>
                      <option value="002">002</option>
               </select>
           </div>
      </div>


   </div>
   </a>

popover 的指令是

js:

app.directive('popover', function($compile){
    return {
        restrict : 'A',
        link : function(scope, elem){

            var content = $("#popover-content").html();
            var compileContent =function() {
             return $compile(content)(scope);
               };


            var title = $("#popover-head").html();
            var options = {
                content: compileContent,
                html: true,
                title: title
            };

            $(elem).popover(options);
        }
    }
});

它运行良好..每当在它之外单击时，我都会尝试隐藏弹出窗口。但由于它在标签中，我无法这样做。请帮助我。我尝试使用类名，id 但是没有成功。

我检查了这个question 它对我不起作用

【问题讨论】：

这些是 Bootstrap 弹出框还是 AngularUI Bootstrap 弹出框？

标签： javascript html angularjs twitter-bootstrap

【解决方案1】：

您需要注入$document 服务并在文档根目录上创建新的事件监听器mousedown。

$document.on('mousedown', addClickOutsideListener);

function addClickOutsideListener(event) {
    var target = event.target;
    while(target != document.body) {
        if(target == elem[0]) {
            //user clicked on Popover, nothing to do
            return;
        }

        if(!target.parentNode)
            return;
        target = target.parentNode;
    }

    hidePopover();
});

不要忘记添加作用域破坏的监听器：

scope.$on('$destroy', function() {
    $document.off('mousedown', addClickOutsideListener);
});

【讨论】：