web-dev-qa-db-fra.com

Sélecteur DOM AngularJS

J'ai quelques directives personnalisées qui utilisent jQuery pour les effets d'animation (les fonctions intégrées de angular dans ngShow/ngHide et autres sont fonctionnelles, mais pas jolies). Je pense me souvenir d’avoir lu quelque part dans la documentation que angular a son propre sélecteur DOM (quelque chose comme angular.export() ou angular.select()) que je devrais utiliser à la place de $(SELECTOR), mais je ne le trouve pas maintenant.

Je fais quelque chose comme ça:

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

}

Je ne manipule pas vraiment $('#'+newValue), je récupère simplement des informations à ce sujet, alors je ne pense pas que je commette un crime contre Angular.

javascriptjquery-selectorsangularjsangularjs-directive
35
jacob

"jqLite" (défini sur la page angular.element ) fournit des méthodes de traversée du DOM telles que children(), parent(), contents(), find(), next() (mais pas previous()). Il n'y a pas de méthode de sélection.

Vous voudrez peut-être essayer JavaScript querySelector .

36
Mark Rajcok

Comme le dit le document officiel d'AngularJs

Toutes les références d'éléments dans angulaires sont toujours enveloppées avec jQuery ou jqLite (tel que l'argument de l'élément dans la fonction de compilation/liaison d'une directive). Ce ne sont jamais des références DOM brutes.

En détail: si vous incluez jQuery avant votre Angular, le angular.element() function devient un alias pour jQuery (sinon, jqLite, voir la réponse de Mark Rajcok).

Vous pouvez vérifier dans le débogueur de l'outil de développement si vous obtenez jQuery ou jqLite en plaçant un point d'arrêt sur la ligne où vous appelez angular.element(). Lors du survol, on vous demandera la bibliothèque appropriée, voir la capture d'écran ci-dessous (dans mon cas, jQuery).

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

Comme le dit le document officiel d'AngularJs

Pour les recherches par nom de balise, essayez plutôt angular.element(document).find(...) ou $document.find()

En d'autres termes: si vous obtenez jQuery lorsque vous appelez angular.element(), alors tout ce qui ressemble à angular.element('#foo > bar') fonctionne si c'est ce à quoi vous pensez.

Si vous vous demandez comment obtenir cette fonctionnalité de sélecteur sans jQuery, vous pouvez utiliser Sizzlejs . Sizzle est la bibliothèque de sélecteurs utilisée par jQuery sous le capot .

38
Ben Lesh