Угловая UI Bootstrap - Datepicker показать на кнопку мыши без функции

Question

Я хочу, чтобы показать DatePicker из angular ui bootstrap библиотеки, когда один из следующих событий occours:

• щелчки пользователя в поле ввода
• пользователь щелкает по календарю значок

Я знаю, что это можно сделать при помощи вызова функции контроллера при нажатии на кнопку, как в примере here

Мой вопрос: действительно ли необходимо создать метод контроллера/области видимости, чтобы показать datepicker?

Следующий пример показывает мой код:

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>

Answer 1

я узнал, что это возможно, чтобы предотвратить распространение событий внутри нг нажмите подобный код:

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>