AngularJS: Как .find использовать jqLite?

Я пытаюсь удалить jquery из моего приложения Angular.js, чтобы сделать его легче, и вместо этого поставьте Angular jqLite. Но приложение сильно использует find ('# id') и находит ( ".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')

Любые мысли? другие идеи?

спасибо

Лиор

Ответ 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... > ).

Ответ 2

Если elem.find() не работает для вас, убедитесь, что вы включили JQuery script до angular script....

Ответ 3

Я работаю с jQuery в моем app, и это то, что сработало для меня.

function link(scope, el) {
    // ...
    $(el[0])
        .find('.classname')
        .doSomethingJQuery_ish();
    // ...
}

Примечания:

Этот встроенный .find() не работает, чтобы найти элементы с class-names/ids, как это указано в документах AngularJS: https://docs.angularjs.org/api/ng/function/angular.element

find() - Ограничено поиском по имени тега

Указанный выше метод хорош, если вы уже загружаете jQuery в свой app. Если нет, вам придется загрузить его для этого.

Удачи.

Ответ 4

angualr использует более легкую версию jquery, называемую jqlite, что означает, что у нее нет всех функций jQuery. вот ссылка в документах angularjs о том, что вы можете использовать из jquery. Angular Документы элементов

В вашем случае вам нужно найти div с идентификатором или именем класса. для имени класса вы можете использовать

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

он не такой гибкий, как jQuery, но что