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

它运作良好..我试图隐藏弹出窗口，只要它在外面爬行。但因为它在标签中我无法这样做。请帮助我。我尝试使用classname，id但是没有成功。

我查了question这对我不起作用

Answer 1

您需要注入$scope.onchange = function() { if ($scope.controller.orderLine.orderType != 2) { $scope.controller.orderLine.unitOfMeasure = 0; } }服务并在文档根目录上创建新的事件监听器$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();
});

在其外部点击时隐藏popover

1 个答案: