Question

我正在尝试关闭外侧点击，该元素在外部点击时关闭，但它也会在内部点击时关闭，它应该像示例中一样工作：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 Main

<html>

 <head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script data-require="angularjs@1.6.2" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
  <script data-require="moment.js@*" data-semver="2.14.1" src="https://npmcdn.com/moment@2.14.1"></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>

JS

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

Answer 1

该指令似乎没问题。您只需要添加$ event.stopPropagation来停止外部事件。

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

以下是您修改后的plunker

外部点击时的角度关闭 - 内部点击也会关闭

1 个答案: