Как выбрать элемент по имени класса с помощью jqLite?

110

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

Есть предположения? другие идеи?

Спасибо

Лиор

angularjs angularjs-directive jqlite

— Лиор
источник

Идентификатор должен быть уникальным, поэтому нет смысла искать элемент, который является потомком другого элемента по идентификатору. Просто выберите элемент по Id. Если ваш идентификатор не уникален, измените свой идентификатор на класс. Кроме того, вы можете использовать DomElement.querySelector(".myclassname")для выбора одного дочернего элемента с помощью селектора css или всего соответствия, добавив к нему All: DomElement.querySelectorAll(".myclassname")это, конечно, не работает в IE <9.

— Kevin B

Если вы определяете a2bэлемент, вы должны определить директиву. Можете ли вы сделать то, что нужно сделать в функции ссылки директивы, и, следовательно, полностью избежать необходимости вызывать find ()? Точно так же и с вашими классами - можете ли вы определить директивы и добавить нужную функциональность в функции ссылки (или компиляции) директив?

— Mark Rajcok

@KevinB Angular jqLite поддерживает «только имена тегов»

— Лиор,

@MarkRajcok Я не определил директиву. вроде работает в IE и chrome. но даже если бы я определил директиву, почему бы это помогло? Мне все равно нужно было бы заполучить элемент DOM.

— Lior

Почему find ('span.btn') или аналогичный не работает для вас?

— Fabi

Ответы:

202

По сути, как было отмечено @ 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 ...>) .

— psema4
источник

Спасибо! чтобы добавить из ответа Рикардо Бина (список рассылки angular), можно также использовать $ document injectable

— Лиор,

К сожалению, указанный URL-адрес больше не действителен ( docs.angularjs.org/guide/dev_guide.mvc.understanding_controller ), и, похоже, в этом разделе нет замены.

— Per Quested Aronsson

Нет. Angular.element (document.querySelector ('# id')) является альтернативой: $ ('# id'), а не: elementArray.find ('# id')

— Брода Ноэль

Верно - но, как мы обнаружили, когда мы строим новые части нашего приложения в angular, нам иногда нужно на некоторое время «приклеить изолентой» старые части, пока они не будут обновлены или реорганизованы. В нашем случае нам нужно было загрузить некоторые старые данные jquery / ajax без изменения существующего беспорядка, поэтому мы сделали следующее: $ http.get ('/ Task / GetTaskStatsByTaskId /' + taskId) .success (function (data) {angular.element (document.querySelector ('# userTasksContainer')). html (данные);});

— Kenn

Если elem является объектом jqlite, это будетangular.element(elem[0].querySelector('.classname'));

— cleversprocket 01

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

В вашем случае вам нужно найти 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, но что

— Ханнад Рехман
источник

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

— ancajic
источник

Хотя OP специально спросил о jqLite, для тех, кто использует jQuery и ожидает, что find () будет работать с классами и идентификаторами, этот ответ, безусловно, может помочь.

— Matt B

Чтобы уточнить: «Если доступен jQuery, angular.element - это псевдоним для функции jQuery. Если jQuery недоступен, angular.element делегирует встроенное подмножество jQuery Angular, называемое« jQuery lite »или jqLite.». Цитата: docs.angularjs.org/api/ng/function/angular.element . jqLite содержит find ().

— Kmaczek