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();
  }

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

小提琴： https://jsfiddle.net/Lt7aP/5556/

Answer 1

因为您在点击时启动了日期选择器。它应该在您单击之前启动，以便在您单击（或聚焦）

时实际工作

所以添加

$("#datepicker").datepicker();

在控制器的开头，删除ng-click属性。它应该这样工作。

您可以通过在小提琴中的输入字段上单击两次来验证这一点。第二次它会起作用，因为它被启动

Answer 2

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>

在初始化时创建datepicker实例。

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

2 个答案: