DOM准备好后如何获取所有表单元素？

Question

我想让所有表单元素（输入、文本区域等）在模糊时向所有这些元素添加 function。

由于 DOM 尚未加载，我得到大多数元素的未定义。 我试图添加

$scope.$watch('$viewContentLoaded

但这不起作用，因为我不使用 ngView，也不需要 ngView。

当我添加超时延迟时它可以工作，但这不是最好的解决方案，因为不同环境的加载可能会有所不同

我试过了：

angular.element(document).ready

但这也没有得到元素。

这是有效的代码，但不是最佳解决方案：

$timeout(() => {
 const allFormElements = $element[0].querySelectorAll('input, textarea');
 const formElement= angular.element(allFormElements[0]);
 formElement.on('blur', function() {
   console.log('THis is blur');
 });
}, 500);

有没有更好的解决方案，而不是使用带有延迟的超时来解决此问题，而无需手动将 function 添加到所有字段。

仅供参考：我正在使用ng-switch和一些ng-if语句来显示特定的输入字段。 也许这就是问题所在。 但我不知道。

Answer 1

仅供参考：我正在使用ng-switch和一些ng-if语句来显示特定的输入字段。 也许这就是问题所在。

要将 function 添加到所有<input>元素，请将其定义为指令：

app.directive("input", function() {
    return {
        restrict: "E",
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        elem.on('blur', function(ev) {
            console.log('THis is blur', ev.target);
        });
    }
});

诸如ng-repeat 、 ng-switch 、 ng-view 、 ng-include和ng-if等指令都会在不同时间向 DOM 添加元素。 AngularJS 框架在将此类元素添加到 DOM 时调用postLink function 指令。

有关详细信息，请参阅

• AngularJS 开发人员指南 - 创建自定义指令