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

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'é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');

Answer 2

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

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

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

Answer 3

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

Answer 4

Amélioration de la réponse de Kaiser :

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

N'oubliez pas d'injecter $document dans votre directive

Answer 5

Peut-être que j'arrive trop tard, mais ceci va fonctionner :

var target = angular.element(appBusyIndicator);

Remarquez, il n'y a pas appBusyIndicator il s'agit d'une valeur d'identification simple.

Ce qui se passe dans les coulisses : (en supposant que c'est appliqué sur un div) (extrait de angular.js ligne 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 retourné.