Question

我正在尝试从我的Angular.js应用程序中删除jquery以使其更轻，并改为使用Angular的jqLite。但该应用程序大量使用find（'＃id'）和find（'。classname'），jqLite不支持，只有'标签名称'（根据文档）

想知道你认为改变它的最佳方法是什么。我想到的一种方法是创建自定义HTML标记。例如：改变
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

到

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

和

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

到

$element.find('a2b')

有什么想法？其他想法？

感谢

利奥尔

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'))

注意：如果您希望从控制器执行此操作，您可能需要查看developers guide中的“正确使用控制器”部分并重构您的演示逻辑进入适当的指令（例如＆lt; a2b ...＆gt;）。

Answer 2

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

Answer 3

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

在您的情况下，您需要找到具有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那么灵活，但是

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

3 个答案:

如何使用jqLit​​e按类名选择元素？

3 个答案:

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