Question

我想从两个方面打开我的日历。点击文本框，然后单击日历图标

<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会在相关输入字段上生成click事件，因此在这种情况下，您会获得预期的行为。

演示： 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中打开日历

1 个答案: