angular.element vs document.getElementById lub selektor jQuery z kontrolką spin (zajęty)

Używam wersji Angularized kontrolki Spin, zgodnie z dokumentacją tutaj: http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

Jedną z rzeczy, które nie podobają mi się w przedstawionym rozwiązaniu, jest użycie jQuery w usłudze, która skutecznie łączy kontrolę spinów z elementem DOM. Wolałbym używać konstrukcji kątowych, aby uzyskać dostęp do elementu. Chciałbym również uniknąć „zakodowania” identyfikatora elementu, do którego spinner musi dołączyć w ramach usługi, i zamiast tego użyć dyrektywy, która ustawia identyfikator w usłudze (singleton), tak aby inni użytkownicy usługi lub sama usługa nie musi tego wiedzieć.

Zmagam się z tym, co daje nam angular.element, a co document.getElementById na tym samym elemencie, który daje nam identyfikator. na przykład. To działa:

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

Żadne z tych nie działa:

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

Wyraźnie robię coś, co powinno być dość oczywistym złem! Czy ktoś może pomóc?

Zakładając, że powyższe zadziała, mam podobny problem z próbą zastąpienia dostępu jQuery do elementu: np. $(target).fadeIn('fast'); Działa angular.element('#appBusyIndicator').fadeIn('fast')lub angular.element('appBusyIndicator').fadeIn('fast')nie działa

Czy ktoś może wskazać mi dobry przykład dokumentacji wyjaśniającej użycie „elementu” Angular w porównaniu z elementem DOM? Angular oczywiście „otacza” element własnymi właściwościami, metodami itp., Ale często trudno jest uzyskać oryginalną wartość. Na przykład, jeśli mam <input type='number'>pole i chcę uzyskać dostęp do oryginalnej zawartości, która jest widoczna w interfejsie użytkownika, gdy użytkownik wpisze „-” (bez cudzysłowów), nic nie otrzymuję, prawdopodobnie dlatego, że „type = number” oznacza, że ​​Angular odrzuca dane wejściowe, mimo że są widoczne w interfejsie użytkownika i chcę je zobaczyć, aby móc je przetestować i wyczyścić.

Wszelkie wskazówki / odpowiedzi mile widziane.

Dzięki.

To może działać tak:

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

W wywołaniu Document.querySelector()zawijasz natywne wywołanie Javascriptangular.element() . Dlatego zawsze otrzymujesz element w obiekcie jqLite lub jQuery , w zależności od tego, czy jQueryjest dostępny / załadowany.

Oficjalna dokumentacja angular.element:

Jeśli jQuery jest dostępne, angular.elementjest aliasem dla jQueryfunkcji. Jeśli jQuery nie jest dostępny, angular.elementdelegaci kątowej s wbudowaną w podgrupie jQuery, która nazywa się „jQuery Lite” lub jqLite .

Wszystkie odwołania do elementów w Angularsą zawsze opakowane w jQuery lub jqLite(na przykład argument elementu w funkcji kompilacji dyrektyw lub funkcji łączenia). Nigdy nie są surowymi DOModniesieniami.

Jeśli zastanawiasz się, dlaczego użyć document.querySelector(), przeczytaj tę odpowiedź .

Jeśli jeszcze tego nie zrobiłeś, powinieneś przeczytać dokumentację dotyczącą elementów kątowych , abyś mógł zrozumieć, co jest obsługiwane przez jqLite, a co nie -jqlite jest podzbiorem jquery wbudowanym w angular.

Te selektory nie będą działać z samym jqLite, ponieważ selektory według identyfikatora nie są obsługiwane.

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

Zatem albo:

• używasz samego jqLite, bardziej ograniczonego niż jquery, ale wystarczającego w większości sytuacji.
• lub dołączasz pełną bibliotekę jQuery do swojej aplikacji i używasz jej jak normalnego jquery, w miejscach, w których naprawdę potrzebujesz jquery.

Edycja: Zauważ, że jQuery powinno zostać załadowane przed angularJS, aby mieć pierwszeństwo przed jqLite:

Prawdziwe jQuery ma zawsze pierwszeństwo przed jqLite, pod warunkiem, że zostało załadowane przed wywołaniem zdarzenia DOMContentLoaded.

Edit2: Wcześniej przegapiłem drugą część pytania:

Problem z <input type="number">, myślę, że nie jest to problem kątowy, jest to zamierzone zachowanie natywnego elementu liczbowego html5.

Nie zwróci wartości nienumerycznej, nawet jeśli spróbujesz ją pobrać za pomocą jquery .val()lub z .valueatrybutem raw .

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

jest równe

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

Myślę, że to nie jest właściwy sposób używania kątów. Jeśli metoda ramowa nie istnieje, nie twórz jej! Oznacza to, że szkielet (tutaj kątowy) nie działa w ten sposób.

Z angularem nie powinieneś manipulować DOM w ten sposób (sposób jQuery), ale użyj pomocnika kątowego takiego jak

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

Lub utwórz własną dyrektywę (własny komponent DOM), aby mieć nad nią pełną kontrolę.

BTW, można zobaczyć tutaj http://caniuse.com/#search=queryselector querySelector jest dobrze obsługiwany, a więc może być używany bezpiecznie.

Jeśli ktoś używa łyka, pokazuje błąd, jeśli go używamy document.getElementById()i sugeruje użycie, $document.getElementById()ale to nie działa.

Posługiwać się -

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

Możesz uzyskać dostęp do elementów za pomocą $ document ($ document musi zostać wstrzyknięty)

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

lub z elementem kątowym, do określonych elementów można uzyskać dostęp jako:

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

Powinieneś wstrzyknąć $ document do swojego kontrolera i użyć go zamiast oryginalnego obiektu dokumentu.

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

Jeśli nie potrzebujesz zawijania elementu w stylu jquery, $ document [0] .querySelector ('# MyID') da ci obiekt DOM.

To działało dobrze dla mnie.

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

Poprawa odpowiedzi Kaisera:

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

Nie zapomnij wstrzyknąć $documentdo swojej dyrektywy

Może jestem za późno, ale to zadziała:

var target = angular.element(appBusyIndicator);

Zauważ, że nie ma appBusyIndicator, to zwykła wartość identyfikatora.

Co dzieje się za kulisami: (zakładając, że jest zastosowane na div) (wzięte z linii angular.js nr: 2769 i dalej ...)

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

Domyślnie, jeśli na stronie nie ma jQuery, zostanie użyty jqLite. Argument jest rozumiany wewnętrznie jako identyfikator i zwracany jest odpowiedni obiekt jQuery.