jquery - get element by id angular 4

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

Question

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 <input type=''number''> 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.

Answer 1

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.

Answer 2

Debes leer los documentos del element 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 <input type="number"> , 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 .

Answer 3

Esto funcionó bien para mí.

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

Answer 4

Mejora a la respuesta de Kaiser:

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

No se olvide de inyectar $document en su directiva

Answer 5

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

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

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.

Answer 6

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

Answer 7

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.

Answer 8

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

Utilizar -

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

Answer 9

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 compilació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 .

Answer 10

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

es igual a

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