Angularjs 如何使用jqLite按类名选择元素？

我试图从Angular.js应用程序中删除jquery，以使其更轻，并将Angular的jqLite改为。但该应用程序大量使用了jqLite不支持的find'id'和find'.classname'，根据文档，它们只使用了“标记名”

想知道你觉得什么是改变现状的最好方法。我考虑的一种方法是创建自定义HTML标记。例如： 改变 添加到包中

到

到

有什么想法吗？其他想法

谢谢

---

Lior本质上是，正如@kevin-b所指出的：

// find('#id')
angular.element(document.querySelector('#id'))

//find('.classname'), assumes you already have the starting elem to search from
angular.element(elem.querySelector('.classname'))

---

注意：如果您希望从控制器执行此操作，您可能需要查看中的“正确使用控制器”部分，并将表示逻辑重构为适当的指令，例如。

如果elem.find不适用于您，检查是否在angular脚本之前包含JQuery脚本……

angualr使用称为jqlite的较轻版本的JQuery，这意味着它没有JQuery的所有功能。这里是angularjs文档中关于您可以从jquery使用什么的参考。

在本例中，您需要找到ID或类名为的div。 对于类名，您可以使用

var elems =$element.find('div') //returns all the div's in the $elements
    angular.forEach(elems,function(v,k)){
    if(angular.element(v).hasClass('class-name')){
     console.log(angular.element(v));
}}

也可以通过查询选择器使用更简单的方法

angular.element(document.querySelector('#id'))

angular.element(elem.querySelector('.classname'))

---

它不像jQuery那样灵活，但ID必须是唯一的，因此按ID查找另一个元素的子元素没有意义。只需按ID选择元素。如果ID不唯一，请将ID更改为类。此外，您还可以使用DomeElement.querySelector.myclassname使用css选择器选择单个Decentant元素，或者通过向其中添加all来选择所有匹配的元素：DomeElement.querySelectorAll.myclassname当然在IE中不起作用如果您定义a2b元素，则必须定义一个指令。您可以在指令的link函数中执行需要执行的操作，从而避免完全调用find吗？与您的类类似，您可以定义指令并将所需的功能放入指令的链接或编译函数中吗？@KevinB Angular的jqLite据说只支持“标记名”@MarkRajcok我没有定义指令。它似乎在IE和chrome中工作。但即使我定义了一个指令，为什么它会有帮助呢？我仍然需要一个DOM元素。为什么find'span.btn'或类似的东西对你不起作用？谢谢！要从Ricardo Bin的邮件列表中添加，也可以使用$document injectable：不幸的是，引用的URL不再有效，并且在该部分中似乎没有任何替换。否。angular.elementdocument.querySelector'id'是：$'id'的替代品，不适用于：elementArray.find'id'Right-但正如我们在angular中构建应用程序的新部分时发现的那样，有时我们需要将旧部分用胶带粘在上面一段时间，直到它们可以更新或重新分解。在本例中，我们需要加载一些旧的jquery/ajax数据，而不修改现有的混乱，因此我们执行了以下操作-$http.get'/Task/GetTaskStatsByTaskId/'+taskId.successfunction数据{angular.elementdocument.querySelector'userTasksContainer.htmldata；}；如果elem是一个jqlite对象，它将是angular.elementelem[0].querySelector.classname'；尽管OP特别询问了关于jqLite的问题，但对于那些使用jQuery并希望find处理类和ID的人来说，这个答案肯定会有所帮助。为了澄清：如果jQuery可用，angular.element是jQuery函数的别名。如果jQuery不可用，angular.element将委托给angular的内置jQuery子集，称为jQuery lite或jqLite。。引用自：。jqLite包含find。

// find('#id')
angular.element(document.querySelector('#id'))

//find('.classname'), assumes you already have the starting elem to search from
angular.element(elem.querySelector('.classname'))

var elems =$element.find('div') //returns all the div's in the $elements
    angular.forEach(elems,function(v,k)){
    if(angular.element(v).hasClass('class-name')){
     console.log(angular.element(v));
}}

angular.element(document.querySelector('#id'))

angular.element(elem.querySelector('.classname'))