如何将自定义指令绑定到所有输入元素？答案

【问题标题】：How to bind a custom directive to all input elements?如何将自定义指令绑定到所有输入元素？
【发布时间】：2019-06-18 12:42:55
【问题描述】：

我有一个名为HandleScroll 的自定义指令，我需要将此指令添加到所有输入元素。当我最初构建它时，它只需要一个输入元素，所以我手动添加它：

< Input handle-scroll....

但现在我意识到我需要将此指令添加到每个输入元素。有没有一种简单的方法可以使用 Javascript 来做到这一点，还是我必须坐下来手动将此指令添加到每个输入标签？

更新----谢谢大家的帮助，由于一些更新我不再需要使用指令，而是需要为每个输入字段绑定一个事件监听器。我已将新问题发布在：Adding an event listener to each input field，如果您能帮上忙，我将不胜感激！

【问题讨论】：

你最好用这个指令解释你想要什么——可能有更好的方法

标签： javascript jquery html angularjs directive

【解决方案1】：

在你的指令类中，你可以在你的装饰器中设置选择器：

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

【讨论】：

嘿，伯纳德，你能详细说明一下吗？这可以在 AngularJS 上工作吗？如果我把它放在我的指令中，它会在每个输入字段上被调用吗？
我相信它可以在 Angular 2+ 中工作，但在 AngularJS 中可能不行。是的，使用此选择器，该指令将应用于您的所有输入。如果您的问题与 AngularJS 有关，则应更改问题中的标记（Angular，不要与 AngularJS 混淆）。
糟糕，我需要 AngularJS 的解决方案。如果我使用 AngularJs，有什么建议可以解决吗？

【解决方案2】：

您可以使用角度组件包装输入。并且在任何地方都使用该组件。

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

【讨论】：

我已经有大约 400 个输入字段，因此我无法更改每个输入并包装指令。我希望有一些 JS 选择每个输入并将指令绑定到它
大多数 IDE 都可以为您完成。 Webstorm ctrl + shift + r 打开替换菜单。这将花费不到一分钟的时间。我希望它有所帮助。

【解决方案3】：

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

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

【讨论】：