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

Question

我想获取所有表单元素（输入、文本区域等），以便在模糊时为所有这些元素添加功能。

由于 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);

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

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

Answer 1

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

要将函数添加到所有<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 函数。

有关详细信息，请参阅

• AngularJS Developer Guide - Creating Custom Directives