Question

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

< Input handle-scroll ....

但是现在我意识到我需要将此指令添加到每个输入元素中。是否有使用Javascript进行此操作的简便方法，还是我必须坐下来并将此指令手动添加到每个输入标签中？

更新-谢谢大家的帮助，由于某些更新，我不再需要使用指令，而是需要将事件侦听器绑定到每个输入字段。我已经在Adding an event listener to each input field上发布了新问题，如果您可以帮助您，我非常感谢！

Answer 1

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

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

Answer 2

您可以使用角分量包裹输入。并随处使用该组件。

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

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

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

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

3 个答案: