角上关闭外部点击 - 关闭也点击内部

我想实现关闭外侧点击，元素关闭外部点击，但它也关闭内部点击，它应该像在例子中工作： http://plnkr.co/edit/ybYmHtFavHnN1oD8vsuw?p=preview 角上关闭外部点击 - 关闭也点击内部

我不明白，为什么element.find无法找到目标，当它是他的孩子。

HTML指令

<div class='multiDate'> 
<div class="dropdown"> 
    <button data-ng-click="show = !show" class="dropbtn">Press</button> 
    <div id="myDropdown" ng-show="show" class="dropdown-content"> 
    <multiple-date-picker></multiple-date-picker> 
    </div> 
</div> 
</div>

HTML主要

<html> 

<head> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script> 
    <script data-require="[email protected]*" data-semver="2.14.1" src="https://npmcdn.com/[email protected]"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <link rel="stylesheet" href="https://arca-computing.github.io/MultipleDatePicker/stylesheets/multipleDatePicker.css" /> 
    <script src="https://arca-computing.github.io/MultipleDatePicker/javascripts/multipleDatePicker.min.js"></script> 
    <script src="script.js"></script> 
</head> 

<body ng-app="app" ng-controller="cntrl"> 
    <multi-date></multi-date> 
</body> 

</html>

var app = angular.module("app", ['multipleDatePicker']); 
app.controller("cntrl", function($scope) { 
}); 

app.directive('multiDate', function($document) { 

    return { 
    templateUrl: 'multi.html', 
    replace: true, 
    link: function(scope, element) { 

     $document.bind('click', function(event) { 
     var isClickedElementChildOfPopup = element 
      .find(event.target) 
      .length > 0; 

     if (isClickedElementChildOfPopup) 
      return; 

     scope.show = false; 
     scope.$apply(); 
     }); 
    } 

    } 

});

PLNKR

来源

2017-11-10 Alex Lavriv

该指令似乎很好。你只需要添加$ event.stopPropagation来停止外部事件。

<multiple-date-picker ng-click="$event.stopPropagation(); dateClickedModelChanged()" day-click="dateClicked" ng-model="dateTimeModel"></multiple-date-picker>

这里是你修改plunker

来源

2017-11-11 06:40:52

谢谢！我刚刚找到了另一个解决方案，但你的情况会更好 –

角上关闭外部点击 - 关闭也点击内部

回答

相关问题