Javascript 如何将自定义指令绑定到所有输入元素?

Javascript 如何将自定义指令绑定到所有输入元素?,javascript,jquery,html,angularjs,directive,Javascript,Jquery,Html,Angularjs,Directive,我有一个名为HandleScroll的自定义指令,我需要将该指令添加到所有输入元素中。当我最初构建它时,它只在一个输入元素上需要,所以我手动添加它,如下所示:

我有一个名为
HandleScroll
的自定义指令,我需要将该指令添加到所有输入元素中。当我最初构建它时,它只在一个输入元素上需要,所以我手动添加它,如下所示:

但是现在我意识到我需要将这个指令添加到每个输入元素中。是否有一种简单的方法可以使用Javascript实现这一点,或者我必须坐下来手动将该指令添加到每个输入标记中


更新——感谢大家的帮助,由于一些更新,我不再需要使用指令,而是需要将事件侦听器绑定到每个输入字段。我已将新问题发布在:,如果你能帮忙,请做,我非常感谢

在指令类中,可以在装饰器中设置选择器:

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

可以使用角度分量包装输入。只需在任何地方使用组件即可

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

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

基本上,我们正在尝试为页面上的每个输入元素添加一个新属性并重新编译该元素。

嘿,Bernard,你能详细说明一下吗?这对AngularJS有效吗?如果我把它放在指令中,它会在每个输入字段上被调用吗?我相信它会在Angular2+中有效,可能不会在AngularJS中。是的,使用这个选择器,指令将应用于所有的输入。如果您的问题与AngularJS有关,您应该更改问题中的标记(AngularJS,不要误认为是AngularJS)。糟糕,AngularJS需要一个解决方案。如果我使用AngularJs,有什么建议吗?我已经有大约400个输入字段,所以我不可能去更改每个输入并包装指令。我希望有一些JS可以选择每个输入,并将指令绑定到它。大多数想法都可以为您做到这一点。Webstorm ctrl+shift+r打开替换菜单。不到一分钟。我希望这会有帮助。你们最好解释一下你们想要这个指令做什么——也许有更好的方法