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 開發人員指南 - 創建自定義指令