javascript - 为什么这个 JQuery 日期选择器在第一次 ng-click 时没有加载？

Question

我使用以下代码通过 ng-click 加载 JQuery UI 日期选择器:

输入:

<input type="text" id="datepicker" autocomplete="off" ng-model="selectedDate" 
ng-click="showDatepicker()" placeholder="(Click to select date)">

JS:

$scope.showDatepicker = function() {
    console.log('clicked');

    // Load datepicker
    $("#datepicker").datepicker();
  }

但是，日期选择器不会在第一次单击时显示，仅在第二次单击时显示。我该如何解决这个问题，以便它在第一次单击输入时显示？

<小时/>

fiddle : https://jsfiddle.net/Lt7aP/5556/

Answer 1

function LoginController($scope) {
  $scope.onLoad = function(){
   $("#datepicker").datepicker();
  }
  $scope.showDatepicker = function() {
    console.log('clicked');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div ng-app ng-controller="LoginController" ng-init='onLoad()'>
  <input type="text" id="datepicker" autocomplete="off" ng-model="selectedDate" ng-change="dateFilter('selectedDate')" ng-click="showDatepicker()" placeholder="(Click to select date)">
</div>

在初始化时创建日期选择器实例。