日历图标未在 angularjs 中打开日历

Question

我想通过 1. 单击文本框和 2. 单击日历图标打开我的日历

<div class="form-group">
      <div class='input-group'>
          <input type='text' class="form-control" datepicker-popup
              ng-model="model.start" is-open="opened.start" id='start'
              ng-click="opened.start = !opened.start" />
          <span class="input-group-addon" for='start' ng-click="opened.start = !opened.start">
              <span class="glyphicon glyphicon-calendar"></span>
          </span>

     </div>
</div>

和控制器代码：

app.controller('dateCtrl', ['$scope', function ($scope) {
  $scope.model = {
    start: new Date('12/31/2014'),
    end: new Date()
  };

  $scope.opened ={
    start: false,
    end: false
  };
}]);

当我点击文本框时它工作正常，但是当我点击日历图标时，没有任何反应。

参见plunker。

Answer 1

使用标签而不是跨度，它们就是为此目的而设计的。只需确保设置正确的 for 和相应的 id 属性：

<div class='input-group'>
    <input type='text' class="form-control" datepicker-popup
        ng-model="model.start" is-open="opened.start" id='start'
        ng-click="opened.start = !opened.start" />
    <label class="input-group-addon" for='start'>
        <span class="glyphicon glyphicon-calendar"></span>
    </label>
</div>

点击 HTMLLabelElement 会在相关输入字段上生成点击事件，因此在这种情况下您会得到预期的行为。

演示： http://plnkr.co/edit/xGPVMPPTOlzOhFIVdhG4?p=preview

UPD.既然你需要切换功能，那么在这种情况下你确实需要javascript解决方案。开始吧，你需要防止事件冒泡，因为 Angular 监听文档级别的事件并立即关闭日历：

<span class="input-group-addon" ng-click="opened.start = !opened.start; $event.stopPropagation()">
    <span class="glyphicon glyphicon-calendar"></span>
</span>

演示： http://plnkr.co/edit/CmJK1M0icGpKvd38S9mK?p=preview

日历图标未在 angularjs 中打开日历

Calendar icon not opening the calendar in angularjs

angularjs

angular-ui-bootstrap