angular.element vs document.getElementById ou sélecteur jQuery avec contrôle spin (busy)

J'utilise la version "angularisée" du contrôle Spin, comme documenté 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 efficacement le contrôle de rotation à l'élément DOM. Je préférerais utiliser des constructions angulaires pour accéder à l'élément. Je voudrais également éviter de "coder en dur" l'identifiant de l'élément auquel le spinner doit s'attacher dans le service et utiliser à la place 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'a pas besoin de le savoir.

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

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

Aucun de ceux-ci ne:

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

Je fais clairement quelque chose qui devrait être assez évident mal! Quelqu'un peut-il 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'); fonctionne angular.element('#appBusyIndicator').fadeIn('fast')ou angular.element('appBusyIndicator').fadeIn('fast')ne fonctionne pas

Quelqu'un peut-il me montrer un bon exemple de documentation qui clarifie l'utilisation d'un "élément" angulaire 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 d'origine. Par exemple, si j'ai un <input type='number'>champ et que 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 le "type = nombre" signifie qu'Angular rejette l'entrée même si elle est visible dans l'interface utilisateur et que je veux la voir afin de pouvoir la tester et l'effacer.

Tous les pointeurs / réponses appréciés.

Merci.

Cela peut fonctionner comme ça:

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

Vous encapsulez l' appel Document.querySelector()Javascript natif dans l' angular.element()appel. Ainsi, vous obtenez toujours l'élément dans un objet jqLite ou jQuery , selon qu'il jQueryest disponible / chargé ou non .

Documentation officielle pour angular.element:

Si jQuery est disponible, angular.elementest un alias pour la jQueryfonction. Si jQuery n'est pas disponible, angular.elementdélègue au sous-ensemble intégré de AngularjQuery , appelé «jQuery lite» ou jqLite .

Toutes les références d'élément dans Angularsont toujours enveloppées avec jQuery ou jqLite(comme l'argument d'élément dans une fonction de compilation de directives ou de lien). Ce ne sont jamais des DOMréférences brutes .

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

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

Ces sélecteurs ne fonctionneront pas avec jqLite seul, car les sélecteurs par identifiant ne sont pas pris en charge.

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

Alors, soit:

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

Edit: Notez que jQuery doit être chargé avant angularJS afin d'avoir la priorité sur jqLite:

Le vrai jQuery a toujours la priorité sur 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">, je pense que ce n'est pas un problème angulaire, c'est le comportement prévu de l' élément numérique html5 natif .

Il ne retournera pas de valeur non numérique même si vous essayez de le récupérer avec jquery .val()ou avec l' .valueattribut raw .

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

est égal à

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

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

Avec angular, vous ne devriez pas manipuler le DOM comme ceci (la manière jquery), mais utiliser une aide angulaire telle que

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

Ou créez votre propre directive (votre propre composant DOM) afin d'avoir un contrôle total dessus.

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

Si quelqu'un utilise gulp, il affiche une erreur si nous l'utilisons document.getElementById()et il suggère d'utiliser $document.getElementById()mais cela ne fonctionne pas.

Utilisation -

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

Vous pouvez accéder aux éléments en utilisant $ document ($ document doit être injecté)

var target = $document('#appBusyIndicator');
var target = $document('appBusyIndicator');

ou avec élément angulaire, les éléments spécifiés sont accessibles comme:

var targets = angular.element(document).find('div'); //array of all div
var targets = angular.element(document).find('p');
var target = angular.element(document).find('#appBusyIndicator');

Vous devez injecter $ document dans votre contrôleur et l'utiliser à la place de l'objet document d'origine.

var myElement = angular.element($document[0].querySelector('#MyID'))

Si vous n'avez pas besoin du wrap d'élément de style jquery, $ document [0] .querySelector ('# MyID') vous donnera l'objet DOM.

Cela a bien fonctionné pour moi.

angular.forEach(element.find('div'), function(node)
{
  if(node.id == 'someid'){
    //do something
  }
  if(node.className == 'someclass'){
    //do something
  }
});

Amélioration de la réponse de Kaiser:

var myEl = $document.find('#some-id');

N'oubliez pas d'injecter $documentdans votre directive

Peut-être que je suis trop tard ici mais cela fonctionnera:

var target = angular.element(appBusyIndicator);

Remarquez, il n'y a pas appBusyIndicator, c'est une valeur d'identification simple.

Ce qui se passe dans les coulisses: (en supposant qu'il soit appliqué sur un div) (pris à partir de la ligne angular.js n °: 2769 et suivantes ...)

/////////////////////////////////////////////
function JQLite(element) {     //element = div#appBusyIndicator
  if (element instanceof JQLite) {
    return element;
  }

  var argIsString;

  if (isString(element)) {
    element = trim(element);
    argIsString = true;
  }
  if (!(this instanceof JQLite)) {
    if (argIsString && element.charAt(0) != '<') {
      throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
    }
    return new JQLite(element);
  }

Par défaut, s'il n'y a pas de jQuery sur la page, jqLite sera utilisé. L'argument est compris en interne comme un id et l'objet jQuery correspondant est renvoyé.