selector angular.element vs document.getElementById o jQuery con control de giro (ocupado)

Estoy usando la versión “angulada” del control Spin, como se documenta aquí: http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

Una de las cosas que no me gusta de la solución que se muestra es el uso de jQuery en el servicio que efectivamente vincula el control de giro al elemento DOM. Preferiría usar construcciones angulares para acceder al elemento. También me gustaría evitar “codificar” el ID del elemento al que el spinner debe conectarse dentro del servicio y en su lugar usar una directiva que establece el id en el servicio (singleton) para que otros usuarios del servicio o el servicio en sí no necesita saber eso.

Estoy luchando con lo que angular.element nos da frente a lo que document.getElementById en el mismo elemento id nos da. p.ej. Esto funciona:

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

Ninguno de estos hace:

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

¡Claramente estoy haciendo algo que debería ser bastante obvio! ¿Alguien puede ayudar?

Asumiendo que puedo hacer que lo anterior funcione, tengo un problema similar al tratar de reemplazar el acceso de jQuery al elemento: por ejemplo $(target).fadeIn('fast'); funciona angular.element('#appBusyIndicator').fadeIn('fast') o angular.element('appBusyIndicator').fadeIn('fast') no

¿Puede alguien señalarme un buen ejemplo de documentación que aclare el uso de un “elemento” angular frente al elemento DOM? Angular obviamente “envuelve” el elemento con sus propias propiedades, métodos, etc. pero a menudo es difícil obtener el valor original. Por ejemplo, si tengo un campo y quiero acceder a los contenidos originales que están visibles en la interfaz de usuario cuando el usuario escribe “-” (sin las comillas), no obtengo nada, presumiblemente porque el ” type = number “significa que Angular está rechazando la entrada a pesar de que está visible en la interfaz de usuario y quiero verla para poder probarla y borrarla.

Cualquier punteros / respuestas apreciadas.

Gracias.

Puede funcionar así:

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

Envuelve la llamada Javascript nativa Document.querySelector() en la llamada angular.element() . De modo que siempre obtiene el elemento en un objeto jqLite o jQuery , dependiendo de si jQuery está disponible / cargado o no.

Documentación oficial para angular.element :

Si jQuery está disponible, angular.element es un alias para la función jQuery . Si jQuery no está disponible, angular.element delega en el subconjunto incorporado de jQuery de Angular , llamado “jQuery lite” o jqLite .

Todas las referencias de elementos en Angular se envuelven siempre con jQuery o jqLite (como el argumento del elemento en una función de comstackción o enlace de directivas). Nunca son referencias DOM sin DOM .

En caso de que se pregunte por qué usar document.querySelector() , lea esta respuesta .

Debes leer los documentos del elemento angular si aún no lo has hecho, para que puedas entender qué es compatible con jqLite y qué no -jqlite es un subconjunto de jquery integrado en angular.

Esos selectores no funcionarán solo con jqLite, ya que los selectores por id no son compatibles.

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

Entonces, o bien:

  • usas jqLite solo, más limitado que jquery, pero suficiente en la mayoría de las situaciones.
  • o incluye la jQuery lib completa en su aplicación, y la usa como jquery normal, en los lugares donde realmente necesita jquery.

Editar: Tenga en cuenta que jQuery debe cargarse antes de angularJS para tener prioridad sobre jqLite:

Real jQuery siempre tiene prioridad sobre jqLite, siempre que se haya cargado antes de que se desencadene el evento DOMContentLoaded.

Edit2: me perdí la segunda parte de la pregunta antes:

El problema con , creo que no es un problema angular, es el comportamiento previsto del elemento de número nativo html5.

No devolverá un valor no numérico incluso si intenta recuperarlo con .val() jquery o con el atributo .value sin .value .

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

es igual a

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

No creo que sea la forma correcta de usar angular. Si no existe un método de marco, ¡no lo cree! Esto significa que el marco (aquí angular) no funciona de esta manera.

Con angular no deberías manipular DOM así (la forma jquery), pero usa ayuda angular como

 

O crea tu propia directiva (tu propio componente DOM) para tener control total sobre ella.

Por cierto, puede ver aquí http://caniuse.com/#search=queryselector querySelector está bien soportado, por lo que se puede usar de forma segura.

Puede acceder a los elementos utilizando $ document (se debe inyectar $ document)

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

o con elemento angular, se puede acceder a los elementos especificados como:

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

Si alguien usa gulp, muestra un error si usamos document.getElementById() y sugiere usar $document.getElementById() pero no funciona.

Utilizar –

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

Debe inyectar $ document en su controlador y usarlo en lugar del objeto de documento original.

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

Si no necesita el ajuste del elemento de estilo jquery, $ document [0] .querySelector (‘# MyID’) le proporcionará el objeto DOM.

Esto funcionó bien para mí.

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

Quizás estoy demasiado tarde aquí, pero esto funcionará:

 var target = angular.element(appBusyIndicator); 

Aviso, no hay appBusyIndicator , es un valor de ID simple.

Lo que está sucediendo detrás de escena: (suponiendo que se aplica en un div) (tomado de la línea angular.js no: 2769 en adelante …)

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

Por defecto, si no hay jQuery en la página, se usará jqLite. El argumento se entiende internamente como un id. Y se devuelve el objeto jQuery correspondiente.

Mejora a la respuesta de Kaiser:

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

No se olvide de inyectar $document en su directiva