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

Estou usando a versão "Angularised" 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 na solução mostrada é o uso do 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. Eu também gostaria de evitar "codificar" o ID do elemento ao qual o girador precisa se conectar 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.

Estou lutando com o que angular.element nos fornece contra o que document.getElementById no mesmo elemento que o id nos fornece. por exemplo. Isso funciona:

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

Nenhuma delas faz:

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

Estou claramente fazendo algo que deve ser bastante óbvio errado! Alguém pode ajudar?

Supondo que eu possa fazer o trabalho acima, eu tenho um problema semelhante ao tentar substituir o acesso 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 versus o elemento DOM? Angular obviamente "envolve" o elemento com suas próprias propriedades, métodos, etc., mas geralmente é difícil obter o valor original. Por exemplo, se eu tenho um <input type='number'>campo e quero acessar o conteúdo original que é visível na interface do usuário quando o usuário digita "-" (sem as aspas), não recebo nada, provavelmente porque "type = number" significa que Angular está rejeitando a entrada, embora seja visível na interface do usuário e eu queira vê-la para que eu possa testá-la e limpá-la.

Quaisquer sugestões / respostas apreciadas.

Obrigado.

Ele pode funcionar assim:

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

Você envolve a chamada Document.querySelector()Javascript nativa na angular.element()chamada. Portanto, você sempre obtém o elemento em um objeto jqLite ou jQuery , dependendo de estar ou não jQuerydisponível / carregado.

Documentação oficial para angular.element:

Se jQuery estiver disponível, angular.elementé um alias para a jQueryfunção. Se o jQuery não estiver disponível, angular.elementdelegue para o subconjunto interno do AngularjQuery , chamado "jQuery lite" ou jqLite .

Todas as referências de elementos Angularsempre são agrupadas com jQuery ou jqLite(como o argumento do elemento em uma função de compilação ou link de diretivas). Eles nunca são DOMreferências brutas .

Caso você se pergunte por que usar document.querySelector(), leia esta resposta .

Você deve ler a documentação do elemento angular , se ainda não o fez, para entender o que é suportado pelo jqLite e o que não é -jqlite é um subconjunto de jquery incorporado ao angular.

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

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

Então, qualquer um:

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

Edit: Observe 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 ele tenha sido carregado antes do evento DOMContentLoaded ser disparado.

Edit2: Eu perdi a segunda parte da pergunta antes:

O problema com <input type="number">, acho que não é um problema angular, é o comportamento pretendido do elemento numérico html5 nativo .

Ele não retornará um valor não numérico, mesmo se você tentar recuperá-lo com o jquery .val()ou com o .valueatributo 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 estrutura não existir, não o crie! Isso significa que a estrutura (aqui angular) não funciona dessa maneira.

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

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

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.

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

Usar -

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

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

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

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

Se você não precisa do wrapper do elemento do estilo jquery, $ document [0] .querySelector ('# MyID') fornecerá o objeto 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
  }
});

Melhoria na resposta do kaiser:

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

Não se esqueça de injetar $documentna sua diretiva

Talvez eu esteja atrasado aqui, mas isso 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 uma div) (extraído 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 objeto jQuery correspondente é retornado.