Question

我要重复使用flatpickr的datepickers，这需要在输入页面中添加一个脚本，如下所示：

<script>
$('[name="DOB"]').flatpickr({
    enableTime: false,
    dateFormat: "d/m/Y",
    minDate: new Date().fp_incr(-43800), // 120 years ago
    maxDate: new Date().fp_incr(-6570), // 18 years ago
});

当引用不在ng-repeat内的输入元素时，这很好用：

<input name="DOB" type="text"/>

但是当此输入在ng-repeat内时它不起作用，我尝试使用ID + $ Index并在脚本中对其进行硬编码以进行测试，但这是行不通的，并且按名称定位也没有作用。工作。

我需要做什么，.flatpicker才能看到ng-repeat中的元素，我认为这可能是加载顺序问题，因为内联脚本在angular之前加载，所以最初没有任何元素可以定位。

我尝试将.flatpickr脚本放入我的AngularJS控制器中，但是随后所有的angular都无法加载，并且出现控制台错误

（...）。flatpickr不是函数

Answer 1

您的脚本加载要比ng-repeat早。

脚本文件
ng-repeat元素。

您可以尝试：

setTimeout(function(){
$('[name="DOB"]').flatpickr({
    enableTime: false,
    dateFormat: "d/m/Y",
    minDate: new Date().fp_incr(-43800), // 120 years ago
    maxDate: new Date().fp_incr(-6570), // 18 years ago
});  
},500);

Answer 2

您需要等待视图加载后才能定位元素，以便它们位于DOM中。

如果您在mainController中使用$viewContentLoaded事件监听器，它将在每次视图加载完成时运行，然后您就可以成功定位元素。

此外，如果要在角度控制器中使用jQuery，则可以使用jQuery关键字代替$，它应该可以识别它。

$scope.$on('$viewContentLoaded', function(){
   console.log('View has finished loading');
   //Firstly check if the DOB input field is in the DOM (as this function will run when any of our views have loaded so we need to make sure its the one we want.)
   let DOBInputField = document.getElementById('DOB');
   if(DOBInputField){
     //Therefore our DOB field is in the DOM so perform our JQuery
     jQuery('[name="DOB"]').flatpickr({
       enableTime: false,
       dateFormat: "d/m/Y",
       minDate: new Date().fp_incr(-43800), // 120 years ago
       maxDate: new Date().fp_incr(-6570), // 18 years ago
     });  
   }

 });

注意：您将需要在输入字段中添加一个ID，以便像我在上文中一样用document.getElementById定位它

<input name="DOB" id="DOB" type="text"/>

js函数看不到ng-repeat内的元素

2 个答案: