Angular UI Bootstrap - Datepicker 在按钮单击时显示没有功能答案

【问题标题】：Angular UI Bootstrap - Datepicker show on button click without functionAngular UI Bootstrap - Datepicker 在按钮单击时显示没有功能
【发布时间】：2014-10-31 18:14:11
【问题描述】：

当发生以下事件之一时，我想显示 angular ui bootstrap 库中的日期选择器：

用户点击输入框
用户点击日历图标

我知道可以通过在单击按钮时调用控制器函数来做到这一点，如示例here

我的问题是：真的有必要创建一个控制器/范围方法来显示日期选择器吗？

以下示例显示了我的代码：

angular.module("MyModule", ["ui.bootstrap"]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>

<div ng-app="MyModule">
  <div class="form-group">
    <label for="BirthDate" class="control-label col-sm-4">BirthDate</label>
    <div class="col-sm-6">
      <p class="input-group">
        <input 
               type="text" 
               class="form-control" 
               id="BirthDate" 
               ng-model="NewEmployee.BirthDate" 
               datepicker-popup="dd.MM.yyyy" 
               is-open="Opened" 
               ng-click="Opened=true">
        <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="Opened=true">
            <i class="glyphicon glyphicon-calendar"></i>
          </button>
        </span>
      </p>
    </div>
  </div>
 </div>

【问题讨论】：

标签： angularjs twitter-bootstrap datepicker

【解决方案1】：

我发现可以像这样在 ng-click 代码中阻止事件传播：

angular.module("MyModule", ["ui.bootstrap"]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>

<div ng-app="MyModule">
  <div class="form-group">
    <label for="BirthDate" class="control-label col-sm-4">BirthDate</label>
    <div class="col-sm-6">
      <p class="input-group">
        <input 
               type="text" 
               class="form-control" 
               id="BirthDate" 
               ng-model="NewEmployee.BirthDate" 
               datepicker-popup="dd.MM.yyyy" 
               is-open="Opened" 
               ng-click="Opened=true">
        <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="Opened=true;$event.stopPropagation();">
            <i class="glyphicon glyphicon-calendar"></i>
          </button>
        </span>
      </p>
    </div>
  </div>
 </div>

【讨论】：