Как привязать пользовательскую директиву ко всем элементам ввода?

Question

У меня есть пользовательская директива под названием HandleScroll, и мне нужно добавить эту директиву ко всем элементам ввода. Когда я изначально создавал его, он был нужен только для одного элемента ввода, поэтому я добавил его вручную:

< Input handle-scroll ....

Но теперь я понимаю, что мне нужно добавить эту директиву для каждого элемента ввода. Есть ли простой способ сделать это с помощью Javascript или мне придется сидеть и вручную добавлять эту директиву к каждому входному тегу?

Обновление ---- Спасибо всем за помощь, из-за некоторых обновлений мне больше не нужно использовать директиву, а нужно привязать прослушиватель событий к каждому полю ввода. Я разместил новый вопрос по адресу: Добавление прослушивателя событий в каждое поле ввода , если вы можете помочь, пожалуйста, я очень благодарен!

Answer 1

Вы можете обернуть ввод угловым компонентом. И просто используйте компонент везде.

<app-input-with-directive></app-input-with-directive>

Answer 2

В AngularJS вы можете использовать следующее.

function MyCtrl($scope, $compile, $window, $document) {
 $window.onload = function() {
    var inputs = $document[0].querySelectorAll('input');

  inputs.forEach(input => {
    input.setAttribute('handle-scroll', true);

    $compile(input, $scope);
  });
 };
}

По сути, мы пытаемся добавить новый атрибут для каждого элемента ввода на странице и перекомпилировать элемент.

Answer 3

В вашем классе директив вы можете установить селектор в декораторе:

@Directive({
    selector: 'input'
})
export class HandleScroll...