Angular 的 element.find() 找不到嵌套的输入元素答案

【问题标题】：Angular's element.find() can't find nested input elementsAngular 的 element.find() 找不到嵌套的输入元素
【发布时间】：2017-04-09 08:44:43
【问题描述】：

我正在使用以下模板（简化）创建指令：

<table>
    <tr>
        <td>
            <input type="text"/>
        </td>
        <td>
            <input type="text"/>
        </td>
    </tr>
</table>

在指令的链接函数中，我想向输入添加侦听器，但我无法获取输入元素。该指令如下所示：

angular.module('app').directive('myDirective', function(){
    return{
        restrict: 'E',
        templateUrl: '<path-to-above-html-file>',
        link: function(scope, element, attr){
            var inputs = element.find('input'); // Returning empty JQLite object
        }
    };
});

根据 Angular 元素文档，find() 方法应该能够找到嵌套元素。但是为什么这不起作用呢？

我尝试在控制台中打印元素并循环遍历所有子元素，并且输入确实存在。

感谢任何帮助！

【问题讨论】：

试试这个element.querySelector('input')
你的指令和element.find('input')在这里工作正常plnkr.co/edit/HIUbDoVbgCShf9OjGnKa
谢谢。这让我意识到输入的数量来自控制器中的一个值，该值是在 console.log 之后加载的。

标签： javascript angularjs element

【解决方案1】：

如果要访问元素，请使用querySelector()。但要注意，querySelector 只返回第一个子元素。

如果您想获取所有元素，请使用querySelctorAll()，如下所示

element.querySelectorAll("input")

【讨论】：

嗯？ "input" 是标签名