Jak wybrać element według nazwy klasy za pomocą jqLite?

110

Próbuję usunąć jquery z mojej aplikacji Angular.js, aby była lżejsza, i zamiast tego umieścić jqLite Angulara. Jednak aplikacja w dużym stopniu korzysta z funkcji find („# id”) i find („.classname”), które nie są obsługiwane przez jqLite, tylko „nazwy tagów” (zgodnie z dokumentacją)

zastanawiałeś się, jakie według ciebie byłoby najlepsze podejście do zmiany tego. Jedno podejście, o którym myślałem, to tworzenie niestandardowych tagów HTML. na przykład: zmiana
<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')

jakieś pomysły? inne pomysły?

dzięki

Lior

angularjs angularjs-directive jqlite

— Lior
źródło

Identyfikatory muszą być niepowtarzalne, dlatego nie ma sensu szukać elementu będącego dzieckiem innego elementu według identyfikatora. Po prostu wybierz element według Id. Jeśli twój identyfikator nie jest unikalny, zmień swój identyfikator na klasę. Możesz także użyć, DomElement.querySelector(".myclassname")aby wybrać pojedynczy element decendant za pomocą selektora css lub wszystkie pasujące, dodając do niego All: DomElement.querySelectorAll(".myclassname")To oczywiście nie działa w IE <9.

— Kevin B

Jeśli definiujesz a2belement, musisz zdefiniować dyrektywę. Czy możesz zrobić, co należy zrobić w funkcji link dyrektywy, a tym samym całkowicie uniknąć konieczności wywoływania funkcji find ()? Podobnie z twoimi klasami - czy możesz zdefiniować dyrektywy i umieścić potrzebną funkcjonalność w funkcjach linkujących (lub kompilujących) dyrektyw?

— Mark Rajcok,

Mówi się, że jqLite @KevinB Angulara obsługuje `` tylko nazwy tagów ''

— Lior

@MarkRajcok Nie zdefiniowałem dyrektywy. wydaje się, że działa w IE i Chrome. ale nawet gdybym zdefiniował dyrektywę, dlaczego miałoby to pomóc? Nadal musiałbym zdobyć element DOM.

— Lior

Dlaczego funkcja find („span.btn”) lub coś podobnego nie działa dla Ciebie?

— Fabi,

Odpowiedzi:

202

Zasadniczo i jak zauważył @ 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'))

Uwaga: jeśli chcesz to zrobić ze swoich kontrolerów, możesz zajrzeć do sekcji „Prawidłowe używanie kontrolerów” w przewodniku dla programistów i zmienić logikę prezentacji na odpowiednie dyrektywy (takie jak <a2b ...>) .

— psema4
źródło

Dzięki! do dodania z odpowiedzi Ricardo Bin (lista mailingowa angulara

— Lior

Niestety, odsyłany adres URL nie jest już prawidłowy ( docs.angularjs.org/guide/dev_guide.mvc.understanding_controller ) i wydaje się, że w tej sekcji nie ma żadnego zamiennika.

— Per Quested Aronsson

No. angular.element (document.querySelector ('# id')) jest alternatywą dla: $ ('# id'), a nie dla: elementArray.find ('# id')

— Broda Noel

Zgadza się - ale jak odkryliśmy, kiedy budujemy nowe części naszej aplikacji w trybie kątowym, czasami musimy „przyklejać” starsze części na chwilę, aż będzie można je zaktualizować lub ponownie rozłożyć. W naszym przypadku musieliśmy załadować stare dane jquery / ajax bez modyfikowania istniejącego bałaganu, więc zrobiliśmy następujące - $ http.get ('/ Task / GetTaskStatsByTaskId /' + taskId) .success (function (data) {angular.element (document.querySelector ('# userTasksContainer')). html (dane);});

— Kenn

Jeśli elem jest obiektem jqlite, to byłby toangular.element(elem[0].querySelector('.classname'));

— cleversprocket

angualr używa lżejszej wersji jquery zwanej jqlite, co oznacza, że nie posiada wszystkich funkcji jQuery. tutaj jest odniesienie w dokumentach angularjs o tym, czego można użyć z jquery. Angular Element docs

W twoim przypadku musisz znaleźć div z identyfikatorem lub nazwą klasy. dla nazwy klasy, której możesz użyć

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));
}}

lub możesz użyć znacznie prostszego sposobu za pomocą selektora zapytań

angular.element(document.querySelector('#id'))

angular.element(elem.querySelector('.classname'))

nie jest tak elastyczny jak jQuery, ale co

— hannad rehman
źródło

Jeśli elem.find()to nie działa, sprawdź, czy dołączasz skrypt JQuery przed skryptem kątowym ....

— ancajic
źródło

Chociaż OP specjalnie zapytał o jqLite, dla tych, którzy używają jQuery i oczekują, że find () będzie współpracował z klasami i identyfikatorami, ta odpowiedź z pewnością może pomóc.

— Matt B,

Aby wyjaśnić: „Jeśli jQuery jest dostępne, angular.element jest aliasem dla funkcji jQuery. Jeśli jQuery nie jest dostępne, angular.element deleguje do wbudowanego w Angulara podzbioru jQuery, zwanego„ jQuery lite ”lub jqLite.”. Cytat z: docs.angularjs.org/api/ng/function/angular.element . jqLite zawiera find ().

— Kmaczek