angular.element vs document.getElementById ou seletor jQuery com controle de rotação (ocupado)

Estou usando a versão “angularizada” do controle Spin, conforme documentado aqui: http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

Uma das coisas que eu não gosto sobre a solução mostrada é o uso de jQuery no serviço que efetivamente anexa o controle de rotação ao elemento DOM. Eu preferiria usar construções angulares para acessar o elemento. Também gostaria de evitar “codificar” o id do elemento que o controle giratório precisa append ao serviço e, em vez disso, usar uma diretiva que defina o id no serviço (singleton) para que outros usuários do serviço ou o serviço em si não precisa saber disso.

Eu estou lutando com o que o angular.element nos dá versus o document.getElementById no mesmo elemento id nos dá. por exemplo. Isso funciona:

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

Nenhum destes faz:

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

Eu estou claramente fazendo algo que deveria ser bastante óbvio errado! Alguém pode ajudar?

Supondo que eu possa obter o funcionamento acima, eu tenho um problema semelhante ao tentar replace o access jQuery ao elemento: por exemplo $(target).fadeIn('fast'); funciona angular.element('#appBusyIndicator').fadeIn('fast') ou angular.element('appBusyIndicator').fadeIn('fast') não

Alguém pode me indicar um bom exemplo de documentação que esclarece o uso de um “elemento” angular em relação ao elemento DOM? Angular obviamente “envolve” o elemento com suas próprias propriedades, methods, etc., mas é difícil obter o valor original. Por exemplo, se eu tenho um campo e eu quero acessar o conteúdo original visível na interface do usuário quando o usuário digita “-” (sem as aspas) não recebo nada, presumivelmente porque o ” type = number “significa que Angular está rejeitando a input, embora ela esteja visível na IU e eu queira vê-la, para que eu possa testá-la e desmarcá-la.

Quaisquer pointers / respostas apreciados.

Obrigado.

Pode funcionar assim:

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

Você quebra a chamada do JavaScript nativo Document.querySelector() para a chamada angular.element() . Portanto, você sempre obtém o elemento em um object jqLite ou jQuery , dependendo se o jQuery está disponível / carregado.

Documentação oficial para angular.element :

Se jQuery estiver disponível, angular.element é um alias para a function jQuery . Se o jQuery não estiver disponível, o angular.element delega ao subconjunto angular.element do jQuery do Angular , que se chama “jQuery lite” ou jqLite .

Todas as referências de elemento em Angular são sempre jqLite com jQuery ou jqLite (como o argumento de elemento em uma function de compilation ou link de diretivas). Eles nunca são referências DOM brutas.

Caso você queira saber por que usar document.querySelector() , leia esta resposta .

Você deve ler o elemento angular docs se você ainda não tem, então você pode entender o que é suportado pelo jqLite e o que não -jqlite é um subconjunto do jquery embutido no angular.

Esses seletores não funcionarão apenas com jqLite, pois os seletores por id não são suportados.

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

Então, ou:

  • você usa o jqLite sozinho, mais limitado que o jquery, mas o suficiente na maioria das situações.
  • ou você inclui a biblioteca jQuery completa em seu aplicativo e a usa como a jquery normal, nos lugares em que você realmente precisa de jquery.

Edit: Note que o jQuery deve ser carregado antes do angularJS para ter precedência sobre o jqLite:

O jQuery real sempre tem precedência sobre o jqLite, desde que tenha sido carregado antes do evento DOMContentLoaded ser triggersdo.

Edit2: Eu perdi a segunda parte da questão antes:

O problema com , eu acho que não é um problema angular, é o comportamento pretendido do elemento número html5 nativo .

Ele não retornará um valor não numérico mesmo se você tentar recuperá-lo com o .val() do jquery ou com o atributo .value bruto.

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

é igual a

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

Eu não acho que é o caminho certo para usar angular. Se um método de framework não existir, não o crie! Isso significa que a estrutura (aqui angular) não funciona dessa maneira.

Com angular, você não deve manipular o DOM dessa forma (a maneira jquery), mas use o auxiliar angular como

 

Ou crie sua própria diretiva (seu próprio componente DOM) para ter controle total sobre ela.

BTW, você pode ver aqui http://caniuse.com/#search=queryselector querySelector é bem suportado e, portanto, pode ser usado com segurança.

Você pode acessar elementos usando $ document ($ document precisa ser injetado)

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

ou com elemento angular, os elementos especificados podem ser acessados ​​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'); 

Se alguém estiver usando o gulp, ele mostrará um erro se usarmos document.getElementById() e sugerir usar $document.getElementById() mas não funciona.

Usar –

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

Você deve injetar $ document em seu controlador e usá-lo em vez do object original do documento.

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

Se você não precisa do wrapper do elemento de estilo jquery, $ document [0] .querySelector (‘# MyID’) lhe dará o object DOM.

Isso funcionou bem para mim.

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

Talvez eu seja tarde demais, mas isso vai funcionar:

 var target = angular.element(appBusyIndicator); 

Observe que não há appBusyIndicator , é um valor de ID simples.

O que está acontecendo nos bastidores: (supondo que seja aplicado em um div) (tirado da linha angular.js no: 2769 em diante …)

 ///////////////////////////////////////////// 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 padrão, se não houver jQuery na página, o jqLite será usado. O argumento é entendido internamente como um id e o object jQuery correspondente é retornado.

Melhoria da resposta do kaiser:

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

Não esqueça de injetar $document em sua diretiva