当我在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?
解决方法:
我相信这是导致问题的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.