2013-03-07 10 views
35

Mam kilka niestandardowych dyrektyw, które używają jQuery do efektów animacji (wbudowany kątowy ngShow/ngHide i podobne są funkcjonalne, ale nie ładne). Wydaje mi się, że pamiętam czytanie w dokumentacji gdzieś, że kąt ma własny selektor DOM (coś takiego jak angular.export() lub angular.select()), którego powinienem użyć zamiast $(SELECTOR); jednak nie mogę go teraz znaleźć.AngularJS DOM selector

robię coś takiego:

//view 
<div scroll-to="element"> //`element` is set via ng-click 
    … 
</div> 

//directive 
link: function(scope, elm, attrs) 
{ 

    scope.$watch(attrs.scrollTo, function scrollToAction(newValue,oldValue) 
    { 
    if (newValue !== oldValue) 
    { 
     elm.animate({ 
     scrollTop: 
      $('#'+newValue).offset().top //replace jquery selector with angular's 
      - elm.offset().top 
      + elm.scrollTop() 
     }); 
    } 
    }); 

} 

nie jestem naprawdę manipulowania $('#'+newValue), po prostu pobierając informacje o tym, więc nie sądzę, jestem popełnienia przestępstwa przeciwko kątowe.

Odpowiedz

36

"jqLite" (określone na stronie angular.element) stanowi DOM metody przemierzania jak children(), parent(), contents(), find(), next() (ale nie previous()). Nie ma metody podobnej do selektora.

Być może warto wypróbować JavaScript querySelector.

+0

+1 Dodałem również dodatkowe informacje, które mogą wyjaśnić, dlaczego OP uważa, że ​​widział metodę kątową, z którą można wybrać elementy. –

+0

Ah dzięki, tak to dokładnie to. Do jockeya dołączam przed kątowością, więc czy 'angular.element()' jest jeszcze bardziej pożądane? Wygląda na to, że spowodowałoby to dodatkowe obciążenie związane z rozwiązaniem aliasu. – jacob

+4

@jacob, użyłbym 'angular.element()', więc jeśli w przyszłości Twój kod nie będzie już wymagał jQuery, nie będziesz musiał go aktualizować. –

38

Jako official AngularJs doc says

Wszystkie odniesienia elementu w Kątowymizawsze owinięty z jQuery lub jqLite (takie jako argument elementem funkcji kompilacji/link dyrektywy'S). Nigdy nie są surowymi referencjami DOM.

W szczegółach: jeśli zawierają jQueryprzed swoje kątowe odniesienia, funkcja angular.element() staje alias dla jQuery (nie jest to inaczej jqLite, patrz odpowiedź Mark Rajcok za).


Można sprawdzić w debuggera Dev narzędzie, jeśli są coraz jQuery lub jqLite umieszczając punkt przerwania na linii, gdzie nazywają angular.element(). Po najechaniu myszą zostaniesz zapytany o odpowiednią bibliotekę, patrz zrzut ekranu poniżej (w moim przypadku otrzymuję jQuery).

jQuery for <code>angular.element()</code>


Jako official AngularJs doc says

do poszukiwania według nazwy znacznika, spróbuj zamiast angular.element(document).find(...) lub $document.find()

Innymi słowy: jeśli masz jQuery Dzwoniąc angular.element(), wtedy coś takiego jak angular.element('#foo > bar') działa, jeśli to właśnie Ty Myśli o.


Jeśli zastanawiasz się, jak uzyskać tę funkcję selektora bez jQuery, to może chcesz używać Sizzlejs. Sizzle is the selector library that jQuery uses under the hood.