Функция js не может видеть элемент внутри ng-repeat

Question

Я ng-repeat'ing out DatePickers, который использует flatpickr для этого требуется скрипт на странице ввода, например:

<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, я чувствую, что это может быть проблемой порядка загрузки, когда встроенный скрипт загружается до угла, поэтому изначально нет элемента для целевого ,

Я пытался поместить скрипт .flatpickr в мой AngularJS Controller, но затем все angular не загружается в браузере с ошибкой консоли

(...). Flatpickr не является функцией

Answer 1

Вам нужно будет дождаться загрузки вашего представления, чтобы нацелить элементы так, чтобы они находились в DOM.

Если вы используете прослушиватель событий $viewContentLoaded в вашем mainController, он будет запускаться каждый разПосле того, как представление закончило загрузку, и вы можете успешно нацелить элементы.

Также, если вы хотите использовать 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
     });  
   }

 });

Примечание. Вам нужно будет добавить идентификатор в поле ввода, чтобы указать для него значение document.getElementById, как я делал выше

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

Answer 2

Ваш скрипт загружается до ng-repeat.

1. Файлы скриптов
2. 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);