Question

我正尝试在侧面点击时实施close，就像在此示例中一样：http://plnkr.co/edit/ybYmHtFavHnN1oD8vsuw?p=preview

但是我总是遗漏一些东西，它在我的代码中没有用。

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 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

你的plunker代码非常有用，除了没有引用jquery库。在角度库之前添加它。

<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>

如果在angular之前没有包含jquery，则angular将使用其内置的jqLite，element.find函数与jquery中的函数完全不同。

Answer 2

首先 angularjs默认使用jquery，angularjs或jqLite之前包含在其他情况下。
其次 jqLite并非所有方法，甚至更多，某些方法的行为可能与jquery不同。 See documentation for angular.element

您的示例因find() - Limited to lookups by tag name而无效。要修复它，您必须更改isClickedElementChildOfPopup一个可能的解决方案的条件

var isClickedElementChildOfPopup = event.target.closest(".dropdown") !== null;

但要小心Browser support closest method和polyfill。

角度js在外部点击关闭

2 个答案: