angular.element vs document.getElementById ou sélecteur jQuery avec contrôle de rotation (occupé)

Question

J'utilise la version "angularisée" du contrôle Spin, comme indiqué ici : http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

L'une des choses que je n'aime pas dans la solution présentée est l'utilisation de jQuery dans le service qui attache effectivement le contrôle de rotation à l'élément DOM. Je préférerais utiliser des constructions angulaires pour accéder à l'élément. J'aimerais également éviter de coder en dur l'identifiant de l'élément auquel le spinner doit être attaché dans le service et utiliser une directive qui définit l'identifiant dans le service (singleton) afin que les autres utilisateurs du service ou le service lui-même n'aient pas besoin de le savoir.

J'ai du mal à comprendre ce que angular.element nous donne par rapport à ce que document.getElementById sur le même élément id nous donne. Par exemple. Cela fonctionne :

  var target = document.getElementById('appBusyIndicator');

Aucun d'entre eux ne le fait :

  var target = angular.element('#appBusyIndicator');
  var target = angular.element('appBusyIndicator');

Je fais clairement quelque chose de mal qui devrait être évident ! Quelqu'un peut-il m'aider ?

En supposant que je puisse faire fonctionner ce qui précède, j'ai un problème similaire en essayant de remplacer l'accès jQuery à l'élément : par exemple $(target).fadeIn('fast'); travaux angular.element('#appBusyIndicator').fadeIn('fast') o angular.element('appBusyIndicator').fadeIn('fast') n'a pas

Quelqu'un peut-il m'indiquer un bon exemple de documentation qui clarifie l'utilisation d'un "élément" Angular par rapport à l'élément DOM ? Angular "enveloppe" évidemment l'élément avec ses propres propriétés, méthodes, etc. mais il est souvent difficile d'obtenir la valeur originale. Par exemple, si j'ai un <input type='number'> et je veux accéder au contenu original qui est visible dans l'interface utilisateur. Lorsque l'utilisateur tape "--" (sans les guillemets), je n'obtiens rien, probablement parce que "type=number" signifie qu'Angular rejette l'entrée même si elle est visible dans l'interface utilisateur et je veux le voir pour pouvoir le tester et le supprimer.

Toute indication ou réponse sera appréciée.

Merci.

Answer 1

Il peut travailler comme ça :

var myElement = angular.element( document.querySelector( '#some-id' ) );

Tu enveloppes le Document.querySelector() Javascript natif dans le angular.element() appel. Ainsi, vous obtenez toujours l'élément dans un jqLite o jQuery selon que l'objet jQuery est disponible/chargé.

Documentation officielle pour angular.element :

Si jQuery est disponible, angular.element est un alias pour l'option jQuery fonction. Si jQuery n'est pas disponible, angular.element les délégués à Angulaire Le sous-ensemble intégré de jQuery que l'on appelle " jQuery lite " ou jqLite .

Toutes les références d'éléments dans Angular sont toujours entourés de jQuery o jqLite (comme l'argument de l'élément dans une fonction de compilation ou de liaison de directives). Ils ne sont jamais bruts DOM références.

Si vous vous demandez pourquoi utiliser document.querySelector() veuillez lire cette réponse .

Answer 2

Vous devriez lire le document angulaire élément si vous ne l'avez pas encore fait, afin de comprendre ce qui est pris en charge par jqLite et ce qui ne l'est pas - jqlite est un sous-ensemble de jquery intégré à angular.

Ces sélecteurs ne fonctionne pas avec jqLite seul, puisque sélectionneurs par id ne sont pas pris en charge.

  var target = angular.element('#appBusyIndicator');
  var target = angular.element('appBusyIndicator');

Donc, soit :

• vous utilisez jqLite seul, plus limité que jquery, mais suffisant dans la plupart des situations.
• ou vous incluez la librairie jQuery complète dans votre application, et l'utilisez comme du jquery normal, aux endroits où vous avez vraiment besoin de jquery.

Edit : Notez que jQuery devrait être chargé avant angularJS afin de prendre le pas sur jqLite :

Le vrai jQuery est toujours prioritaire sur le jqLite, à condition qu'il ait été chargé avant le déclenchement de l'événement DOMContentLoaded.

Edit2 : J'ai manqué la deuxième partie de la question avant :

Le problème avec <input type="number"> , I pensez à Il ne s'agit pas d'un problème lié à Angular, mais du comportement prévu de l'interface utilisateur. indigène Élément numérique html5.

Il ne renverra pas de valeur non numérique, même si vous essayez de la récupérer avec la fonction jquery .val() ou avec la méthode brute .value attribut.

Answer 3

var target = document.getElementById('appBusyIndicator');

est égal à

var target = $document[0].getElementById('appBusyIndicator');

Answer 4

Si quelqu'un utilise gulp, il montre une erreur si on utilise document.getElementById() et il suggère d'utiliser $document.getElementById() mais ça ne marche pas.

Utilisation -

$document[0].getElementById('id')

Answer 5

Je ne pense pas que ce soit la bonne façon d'utiliser Angular. Si une méthode du framework n'existe pas, ne la créez pas ! Cela signifie que le framework (ici angular) ne fonctionne pas de cette façon.

Avec angular, vous ne devez pas manipuler le DOM comme cela (à la manière de jquery), mais utiliser des aides angulaires telles que

<div ng-show="isLoading" class="loader"></div>

Vous pouvez aussi créer votre propre directive (votre propre composant DOM) afin d'en avoir le contrôle total.

BTW, vous pouvez voir ici http://caniuse.com/#search=queryselector querySelector est bien supporté et peut donc être utilisé en toute sécurité.