angle.element vs document.getElementById oder jQuery-Selektor mit Spin-Steuerung (Besetzt)

Ich verwende die "Angularised" -Version des Spin-Steuerelements, wie hier dokumentiert: http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

Eines der Dinge, die ich an der gezeigten Lösung nicht mag, ist die Verwendung von jQuery im Service, mit dem die Spinsteuerung effektiv an das DOM-Element angehängt wird. Ich würde es vorziehen, eckige Konstrukte zu verwenden, um auf das Element zuzugreifen. Ich möchte auch vermeiden, die ID des Elements, an das der Spinner innerhalb des Dienstes anhängen muss, "fest zu codieren", und stattdessen eine Direktive verwenden, die die ID im Dienst (Singleton) so festlegt, dass andere Benutzer des Dienstes oder Der Service selbst muss das nicht wissen.

Ich kämpfe mit dem, was angle.element uns gibt, und dem, was document.getElementById auf derselben Element-ID uns gibt. z.B. Das funktioniert:

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

Nichts davon tut:

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

Ich mache eindeutig etwas, das ziemlich offensichtlich falsch sein sollte! Kann jemand helfen?

Angenommen, ich kann das oben genannte zum Laufen bringen, habe ich ein ähnliches Problem beim Versuch, den jQuery-Zugriff auf das Element zu ersetzen: zB $(target).fadeIn('fast'); funktioniert angular.element('#appBusyIndicator').fadeIn('fast')oder angular.element('appBusyIndicator').fadeIn('fast')nicht

Kann mich jemand auf ein gutes Beispiel für eine Dokumentation verweisen, die die Verwendung eines Angular- "Elements" gegenüber dem DOM-Element verdeutlicht? Angular "umschließt" das Element offensichtlich mit seinen eigenen Eigenschaften, Methoden usw., aber es ist oft schwierig, den ursprünglichen Wert zu erhalten. Wenn ich zum Beispiel ein <input type='number'>Feld habe und auf den ursprünglichen Inhalt zugreifen möchte, der in der Benutzeroberfläche sichtbar ist, wenn der Benutzer "-" (ohne Anführungszeichen) eingibt, erhalte ich nichts, vermutlich weil "type = number" bedeutet, dass Angular ablehnt Die Eingabe, obwohl sie in der Benutzeroberfläche sichtbar ist und ich sie sehen möchte, damit ich sie testen und löschen kann.

Alle Hinweise / Antworten geschätzt.

Vielen Dank.

Es kann so funktionieren:

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

Sie verpacken den Document.querySelector()nativen Javascript- Aufruf in den angular.element()Aufruf. Sie erhalten das Element also immer in einem jqLite- oder jQuery- Objekt, je nachdem, ob jQueryes verfügbar / geladen ist oder nicht .

Offizielle Dokumentation für angular.element:

Wenn jQuery verfügbar ist, angular.elementist dies ein Alias ​​für die jQueryFunktion. Wenn jQuery nicht verfügbar ist, angular.elementdelegieren Sie an Angulars integrierte Teilmenge von jQuery"jQuery lite" oder " jqLite" .

Alle Elementreferenzen in Angularwerden immer mit jQuery oder umschlossenjqLite (z. B. das Elementargument in einer Kompilierungs- oder Verknüpfungsfunktion von Direktiven). Sie sind niemals rohe DOMReferenzen.

Falls Sie sich fragen, warum Sie es verwenden sollen document.querySelector(), lesen Sie bitte diese Antwort .

Sie sollten die Winkel lesen Element docs , wenn Sie noch nicht haben, so können Sie verstehen , was mit jqLite unterstützt wird und was nicht -jqlite eine Teilmenge von Jquery in Winkel gebaut ist.

Diese Selektoren funktionieren nicht nur mit jqLite, da Selektoren nach ID nicht unterstützt werden.

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

Also entweder :

• Sie verwenden jqLite allein, eingeschränkter als jquery, aber in den meisten Situationen ausreichend.
• oder Sie fügen die vollständige jQuery-Bibliothek in Ihre App ein und verwenden sie wie normale jquery an den Stellen, an denen Sie jquery wirklich benötigen.

Bearbeiten: Beachten Sie, dass jQuery vor angleJS geladen werden sollte, um Vorrang vor jqLite zu haben:

Echte jQuery hat immer Vorrang vor jqLite, vorausgesetzt, sie wurde vor dem Auslösen des DOMContentLoaded-Ereignisses geladen.

Edit2: Ich habe den zweiten Teil der Frage schon einmal verpasst:

Das Problem mit <input type="number">, ich denke, es ist kein Winkelproblem, es ist das beabsichtigte Verhalten des nativen HTML5-Zahlenelements.

Es wird kein nicht numerischer Wert zurückgegeben, selbst wenn Sie versuchen, ihn mit jquery's .val()oder mit dem raw- .valueAttribut abzurufen .

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

entspricht

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

Ich denke nicht, dass es der richtige Weg ist, Winkel zu verwenden. Wenn es keine Framework-Methode gibt, erstellen Sie sie nicht! Dies bedeutet, dass das Framework (hier eckig) nicht auf diese Weise funktioniert.

Mit Angular sollten Sie DOM nicht wie folgt manipulieren (auf die jquery-Art), sondern einen Angular Helper wie z

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

Oder erstellen Sie Ihre eigene Direktive (Ihre eigene DOM-Komponente), um die volle Kontrolle darüber zu haben.

Übrigens können Sie hier sehen, http://caniuse.com/#search=queryselector querySelector wird gut unterstützt und kann daher sicher verwendet werden.

Wenn jemand schluckt, zeigt es einen Fehler, wenn wir verwenden, document.getElementById()und es wird empfohlen, zu verwenden$document.getElementById() aber er funktioniert nicht.

Verwenden -

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

Sie können mit $ document auf Elemente zugreifen ($ document muss injiziert werden)

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

oder mit einem Winkelelement kann auf die angegebenen Elemente zugegriffen werden als:

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

Sie sollten $ document in Ihren Controller einfügen und anstelle des Originaldokumentobjekts verwenden.

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

Wenn Sie den Zeilenumbruch des jquery-Stilelements nicht benötigen, erhalten Sie mit $ document [0] .querySelector ('# MyID') das DOM-Objekt.

Das hat bei mir gut funktioniert.

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

Verbesserung der Antwort von Kaiser:

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

Vergessen Sie nicht, $documentin Ihre Richtlinie einzufügen

Vielleicht bin ich zu spät hier, aber das wird funktionieren:

var target = angular.element(appBusyIndicator);

Beachten Sie, dass es keinen appBusyIndicatoreinfachen ID-Wert gibt.

Was passiert hinter den Kulissen: (vorausgesetzt, es wird auf ein Div angewendet) (ab Angular.Js Zeile Nr. 2769 ...)

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

Wenn auf der Seite keine jQuery vorhanden ist, wird standardmäßig jqLite verwendet. Das Argument wird intern als ID verstanden und das entsprechende jQuery-Objekt wird zurückgegeben.