角上關閉外部點擊 - 關閉也點擊內部

我想實現關閉外側點擊，元素關閉外部點擊，但它也關閉內部點擊，它應該像在例子中工作： 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

謝謝！我剛剛找到了另一個解決方案，但你的情況會更好 –

角上關閉外部點擊 - 關閉也點擊內部

回答

相關問題