Як вибрати елемент за назвою класу за допомогою jqLite?

110

Я намагаюся видалити jquery з додатка Angular.js, щоб зробити його легшим, а замість нього поставив jqLite Angular. Але додаток використовує знахідки ("# 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.

— Кевін Б

Якщо ви визначаєте a2bелемент, ви повинні визначити директиву. Чи можете ви зробити те, що потрібно зробити у функції посилання директиви, і, отже, уникнути необхідності виклику find () повністю? Аналогічно з вашими класами - чи можете ви визначити директиви та помістити необхідну функціональність у функції посилань (або компілювання) директив?

— Марк Райкок

Кажуть, що jqLite @KevinB Angular підтримує "лише імена тегів"

— Lior

@MarkRajcok Я не визначив директиву. здається, працює в IE та chrome. але навіть якщо я б визначив директиву, навіщо це допомогти? Мені все-таки потрібно було б втримати елемент DOM.

— Lior

Чому пошук ("span.btn") або подібне не працює для вас?

— Фабі

Відповіді:

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

— псема4
джерело

Дякую! щоб додати відповідь Рікардо Біна (список розсилки кутового), $ документ для ін'єкцій також можна використовувати: jsfiddle.net/ricardohbin/fTQcs

— Lior

На жаль, згадана URL-адреса більше не дійсна ( docs.angularjs.org/guide/dev_guide.mvc.understanding_controller ), і в цьому розділі, схоже, немає жодної заміни.

— Запитаний Аронсон

№ angular.element (document.querySelector ('# id')) є альтернативою: $ ('# id'), не для: elementArray.find ('# id')

— Брода Ноель

Правильно - але, як ми виявили, коли ми будуємо нові частини нашого додатка у кутовій формі, нам іноді потрібно "наклеїти" на себе старі деталі на деякий час, поки вони не можуть бути оновлені або відновлені знову. У нашому випадку нам потрібно було завантажити деякі старі дані jquery / ajax без зміни існуючого безладу, тому ми зробили наступне- $ http.get ('/ Task / GetTaskStatsByTaskId /' + taskId) .success (функція (дані) {angular.element (document.querySelector ('# userTasksContainer')). html (data);});

— Кенн

Якщо елем є об’єктом jqlite, це було бangular.element(elem[0].querySelector('.classname'));

— cleversprocket

angualr використовує більш легку версію jquery, яку називають jqlite, а це означає, що вона не має всіх особливостей jQuery. ось посилання у документах angularjs про те, що можна використовувати з jquery. Документи кутового елемента

У вашому випадку вам потрібно знайти 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 перед кутовим сценарієм ....

— ancajic
джерело

Хоча ОП спеціально запитала про jqLite, для тих, хто використовує jQuery і очікує, що знайдуть () роботу з класами та ідентифікаторами, ця відповідь, безумовно, може допомогти.

— Метт Б

Щоб уточнити: "Якщо jQuery доступний, angular.element є псевдонімом функції jQuery. Якщо jQuery недоступний, angular.element делегує вбудованому підмножину jQuery вбудованого підмножини jQuery під назвою" jQuery lite "або jqLite.". Цитата від: docs.angularjs.org/api/ng/function/angular.element . jqLite містить find ().

— Кмачек