angularjs - 如何修复 Flatpickr 重新创建

Question

我使用flatpickr angular 1.5.0，es6 env，flatpickr 版本是3.0.6，我绑定了一个输入事件打开flatpickr，当日历打开时，它立即关闭，但是当我使用触摸板点击输入时，不是点击，它运作良好。问题是什么？

我尝试使用jQuery绑定事件，结果是一样的。我的操作系统是 Mac。

我的片段：

import flatpickr from 'flatpickr'

$scope.showPicker = function() {
  flatpickr(document.getElementById('date-input'), {
    locale: zh.zh,
    onChange: function(selectedDates, dateStr) {
      $scope.currDay = dateStr
      $scope.reqDetail($stateParams.gid, dateStr)
    }
  })
}

<input
  ng-model="currDay"
  readonly="readonly"
  id="date-input"
  ng-click="showPicker()"
>

我在官方issue中问过，维护人员说不是插件本身的问题。

我该如何解决？

Answer 1

我解决了它，问题是因为重新创建了无限次，我通过这种方式解决了：

$scope.fpCache = []
$scope.showPicker = function() {
if($scope.fpCache.length == 0) {
  const fp = new Flatpickr(document.getElementById('date-input'), {
    locale: zh.zh,
    onChange: function(selectedDates, dateStr) {
      $scope.currDay = dateStr
      $scope.searchByDate(dateStr)
    }
  })
  fp.open()
  $scope.fpCache.push(fp)
} else {
  $scope.fpCache[0].open()
}
// $('#date-input').flatpickr({})
// flatpickr(document.getElementById('date-input'), {
//   locale: zh.zh,
//   onChange: function(selectedDates, dateStr) {
//     $scope.currDay = dateStr
//     $scope.searchByDate(dateStr)
//   }
// })
}

我创建了一个缓存数组来创建单个实例，它运行良好。