在 IE 中单击 Angular Bootstrap Datepicker 外部会引发“包含”错误

Question

当我在 IE 中打开的日期选择器框外单击时，出现以下错误：

'对象不支持属性或方法'包含'Bootstrap datepicker'

日期选择器没有关闭。我遇到了许多涉及修改 Bootstrap 源的修复程序，但我不想走这条路。 （IE 没有包含方法）

我能够通过在顶级父 div 上调用此函数来解决此问题：

<div class="clearfix" ng-click="formClicked($event)">
  <div class="form-group required">
    <label for="shipTo">Ship-To #</label>
    <select id="shipTo" class="form-control input-sm" ng-model="model.orderInfo.accountId"></select>
  </div>
  <div class="col-md-6">
    <div class="form-group required">
      <label for="shipDate">Ship Date</label>
      <div class="input-group calendar-box">
        <input id="shipDate" ng-model="model.orderInfo.shipDate" min-date="model.shipDateMin" max-date="model.shipDateMax" class="form-control input-sm" ng-click="dateOpen($event, 'shipDateOpened')" type="text" datepicker-popup="{{model.datePickFormat}}" is-open="model.shipDateOpened" ng-change="setCancelDate()" ng-readonly="true" required>
        <div class="input-group-addon cursor-pointer calendar-icon" ng-click="dateOpen($event, 'shipDateOpened')"></div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group required">
      <label for="cancelDate">Cancel Date</label>
      <div class="input-group calendar-box">
        <input id="cancelDate" ng-model="model.orderInfo.cancelDate" min-date="model.cancelDateMin" max-date="model.cancelDateMax" class="form-control input-sm" ng-click="dateOpen($event, 'cancelDateOpened')" type="text" datepicker-popup="{{model.datePickFormat}}" is-open="model.cancelDateOpened" ng-change="checkCancelDate()" ng-readonly="true" required>
        <div class="input-group-addon cursor-pointer calendar-icon" ng-click="dateOpen($event, 'cancelDateOpened')"></div>
      </div>
    </div>
  </div>
</div>

函数如下所示：

$scope.formClicked = function($event){
    $log.debug('form clicked');
    $event.preventDefault();
    $event.stopPropagation();

    $scope.model.shipDateOpened = false;
    $scope.model.cancelDateOpened = false;
};

问题是，现在在我的移动视图上，当我尝试点击选择下拉菜单时会触发这个 formClicked($event) 函数，但它不会打开。有没有更好的解决方案，或者当我在我的桌面视图中时，有没有一种方法可以有条件地呈现 ng-click？

Answer 1

我相信是这个piece of code 导致了问题：

var documentClickBind = function(event) {
   var popup = $popup[0];
   var dpContainsTarget = element[0].contains(event.target);
   // The popup node may not be an element node
   // In some browsers (IE) only element nodes have the 'contains' function
   var popupContainsTarget = popup.contains !== undefined && popup.contains(event.target);
   if (scope.isOpen && !(dpContainsTarget || popupContainsTarget)) {
     scope.$apply(function() {
       scope.isOpen = false;
    });
  }
};

正如评论所说，以及 MDN states - IE 和 Edge 都没有 Node.contains() 并且显然 MS 没有实施它的计划（问题已多次提出，例如 this 只是刚刚关闭） .所以polyfill 将是解决这个问题的好方法：

if (!Node.prototype.contains) {
  Node.prototype.contains = function contains(node) {
    if (!(0 in arguments)) {
        throw new TypeError('1 argument is required');
    }
    do {
        if (this === node) {
            return true;
        }
    } while (node = node && node.parentNode);
    return false;
  }
}  

this 的略微修改版本，最初基于 this suggestion。