Frage angle.element vs document.getElementById oder jQuery-Selektor mit Spin (beschäftigt) Steuerelement


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 Dienst, der das Spin-Steuerelement effektiv an das DOM-Element anfügt. Ich würde lieber eckige Konstrukte verwenden, um auf das Element zuzugreifen. Ich möchte auch vermeiden, die ID des Elements hart zu codieren, an das der Spinner innerhalb des Dienstes anhängen muss, und stattdessen eine Anweisung verwenden, die die ID im Dienst (Singleton) festlegt, so dass andere Benutzer des Dienstes oder der Dienst selbst muss das nicht wissen.

Ich kämpfe mit was eckle.element gibt uns vs was document.getElementById auf die gleiche Element-ID gibt uns. z.B. Das funktioniert:

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

Keine von diesen tun:

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

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

Angenommen, ich kann die oben genannten Arbeiten ausführen, habe ich ein ähnliches Problem mit dem Versuch, jQuery Zugriff auf das Element zu ersetzen: z.B $(target).fadeIn('fast');  funktioniert     angular.element('#appBusyIndicator').fadeIn('fast') oder angular.element('appBusyIndicator').fadeIn('fast') nicht

Kann mir jemand ein gutes Beispiel für eine Dokumentation nennen, die die Verwendung eines Angular- "Elements" gegenüber dem DOM-Element verdeutlicht? Angular "umhüllt" offensichtlich das Element mit seinen eigenen Eigenschaften, Methoden usw., aber es ist oft schwierig, den ursprünglichen Wert zu erhalten. Zum Beispiel wenn ich eine habe <input type='number'> Feld und ich möchte auf die ursprünglichen Inhalte zugreifen, die im ui sichtbar sind, wenn der Benutzer "-" (ohne die Anführungszeichen) eingibt, bekomme ich nichts, vermutlich weil "type = number" bedeutet, dass Angular die Eingabe zurückweist, obwohl sie sichtbar ist in der Benutzeroberfläche und ich möchte es sehen, damit ich es testen und löschen kann.

Alle Hinweise / Antworten geschätzt.

Vielen Dank.


131
2018-06-21 07:53


Ursprung


Antworten:


Es kann arbeite so:

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

Du wickelst das Document.querySelector() natives Javascript Ruf in die angular.element() Anruf. So bekommst du immer das Element in einem jqLite oder jQuery Objekt, abhängig davon, ob oder nicht jQuery ist verfügbar / geladen.

Offizielle Dokumentation für angular.element:

Ob jQuery ist verfügbar, angular.element ist ein Alias ​​für die jQuery Funktion. Wenn jQuery nicht verfügbar ist, angular.element Delegierte nach Eckigs eingebaute Teilmenge von jQuery, das heißt "jQuery lite" oder jqLite.

Alle Elementreferenzen in Angular sind immer mit eingewickelt jQuery oder jqLite (wie das Element-Argument in einer Direktiven-Kompilierungs- oder Link-Funktion). Sie sind niemals roh DOM Verweise.

Falls Sie sich wundern, warum zu verwenden document.querySelector(), Bitte lesen Sie diese Antwort.


201
2017-09-20 16:12



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

Diese Selektoren wird nicht funktionieren mit jqLite allein, seit Selektoren durch ID werden nicht unterstützt.

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

Also entweder :

  • Du verwendest jqLite alleine, begrenzter als jQuery, aber genug in den meisten Situationen.
  • 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 wirklich jQuery benötigen.

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

Real jQuery hat immer Vorrang vor jqLite, vorausgesetzt, es war   geladen, bevor das DOMContentLoaded-Ereignis ausgelöst wurde.

Edit2: Ich habe den zweiten Teil der Frage vorher verpasst:

Das Problem mit <input type="number"> , ICH denken es ist kein kantiges Problem, es ist das beabsichtigte Verhalten der einheimisch html5 Zahlenelement.

Es wird keinen nicht numerischen Wert zurückgeben, auch wenn Sie versuchen, es mit jQuery abzurufen .val() oder mit dem Rohen .value Attribut.


44
2018-06-21 08:27



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

entspricht

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

21
2017-12-28 18:28



Ich denke nicht, dass es der richtige Weg ist, eckig zu verwenden. Wenn eine Framework-Methode nicht existiert, erstellen Sie sie nicht! Dies bedeutet, dass der Rahmen (hier eckig) nicht so funktioniert.

Mit eckigen sollte man DOM nicht so manipulieren (jQuery), sondern eckige Helfer wie

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

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


17
2017-09-20 16:46



Sie können Elemente mit $ document aufrufen ($ document muss eingefügt werden)

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

oder mit angular element können die angegebenen Elemente wie folgt aufgerufen werden:

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

12
2018-03-14 10:32



Wenn jemand Schluck benutzt, zeigt es einen Fehler wenn wir es benutzen document.getElementById() und es schlägt vor zu verwenden $document.getElementById() aber es funktioniert nicht.

Benutzen -

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

10
2018-05-10 12:06



Sie sollten $ document in Ihren Controller injizieren und es anstelle des ursprünglichen Dokumentobjekts verwenden.

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

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


9
2018-06-10 22:36



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

6
2018-02-12 01:58