angularjs - How to select an element by classname using jqLite?

Question

I'm trying to remove jquery from my Angular.js app in order to make it lighter, and put Angular's jqLite instead. But the app makes heavy use of find('#id') and find ('.classname'), which are not supported by jqLite, only 'tag names' (as per documentation)

wondered what do u feel would be the best approach to change it. One approach I thought about is to create custom HTML tags. for example: change
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

to

<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>

and

$element.find('#add-to-bag') 

to

$element.find('a2b')

Any thoughts? other ideas?

thanks

Lior

Answer 1

本质上，正如@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'))

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

Answer 2

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 那样灵活，但是什么

Answer 3

如果elem.find()不适合您，请检查您是否在 Angular 脚本之前包含 JQuery脚本......