单击图标时，Angular js 和引导 ui 日期选择器未在 chrome 中打开答案

【问题标题】：Angular js and bootstrap ui date picker not open in chrome on clicking on icon单击图标时，Angular js 和引导 ui 日期选择器未在 chrome 中打开
【发布时间】：2014-07-01 02:38:01
【问题描述】：

我有使用引导 UI 的角度日期选择器。此代码在 IE 中运行良好，但无法在 chrome 中打开。在调用方法 open() 后，输入框获得焦点，但日期选择器弹出窗口未打开。任何帮助都会非常显着。在此先感谢

<p class="input-group">
<input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
                               <span class="input-group-btn">
                                  <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
                               </span>
                        </p>

Java 脚本

$scope.open = function () {    
    $scope.opened = true;                                                                                    
};

【问题讨论】：

标签： javascript angularjs datepicker modal-dialog angular-ui-bootstrap

【解决方案1】：

您需要阻止单击事件从按钮传播，因为它会导致日期选择器立即关闭...

<button type="button" class="btn btn-default" ng-click="$event.stopPropagation(); open();">
    <i class="glyphicon glyphicon-calendar"></i>
</button>

Demo - JSFiddle

【讨论】：

可能应该同时添加这两个 $event.preventDefault(); $event.stopPropagation();
感谢@Anthony Chu，它对我的工作很好。非常感谢。

【解决方案2】：

它可能会正确使用上述解决方案。
当你使用 $event.preventDefault(); $event.stopPropagation(); 小心点。它也可能影响其他组件事件。实时代码是http://jsfiddle.net/mDLzn/34/

$scope.open = function (event) { 
event.stopPropagation();
event.preventDefault();
$scope.opened = true; 
console.log('foo'); };

【讨论】：