在弹出框外单击时隐藏弹出框

Question

以下是我的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);
        }
    }
});

我试图隐藏弹出窗口，因为它在it.But之外，因为它是在标签中我无法做so.please帮助我在这。我尝试与类名，id，但没有成功。

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

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