1. Was ist Umfang?
Scope (http://code.angularjs.org/1.0.2/docs/api/ng.$rootscope.scope) ist ein Objekt, das auf das Anwendungsmodell zeigt. Es ist auch der Ausführungskontext des Ausdrucks (http://www.cnblogs.com/lclao/archive/2012/09/16/2687162.html). Umfang wird in eine Hierarchie von DOM -Strukturen gelegt, die denen der Anwendung ähneln. Umfang kann Ausdrucks- und Ausbreitungsereignisse überwachen (Watch, $ Watch).
2. Die Eigenschaften des Umfangs
3. Umfang als Datenmodell (Umfang als Datenmodell)
Umfang ist die Verbindung zwischen dem Anwendungscontroller und der Ansicht. In the stage of template linking (http://www.cnblogs.com/lclao/archive/2012/09/04/2669802.html), directive (http://www.cnblogs.com/lclao/archive/2012/09/09/2677190.html) set the $watch expression in Umfang. $ watch ermöglicht die Richtlinie, die Änderungen der Attribute zu kennen, sodass die Richtlinie den aktualisierten Wert in das DOM macht.
Sowohl Controller als auch Richtlinien verweisen auf den Umfang, aber nicht auf einander. Diese Anordnung trennt den Controller von der Richtlinie und DOM. Dies ist ein wichtiger Ort, da er den Controller aus der Sicht isoliert und die Testgeschichte der Anwendungen erheblich verbessert.
<! DocType html> <html lang = "zh-cn" ng-App> <head> <meta charset = "utf-8"> <titels> data-model </title> <style type = "text/csS"> .ng-cloak {display: keine; } </style> </head> <body> <div ng-controller = "mycontroller"> Ihr Name: <Eingabe type = "text" ng-model = "userername"/> <button ng-klick = "Sayhello ()"> Willkommen </button type = "text/javaScript"> </script> <script type = "text/javaScript"> Funktion MyController ($ scope) {$ scope.username = "my Little Dada"; $ scope.sayhello = function () {$ scope.greeting = "hello ~" + $ scope.username + "!"; }; } </script> </body> </html>Im obigen Beispiel können wir feststellen, dass MyController das Benutzername -Attribut im Bereich "My Little Dada" zuweist. Anschließend benachrichtigt Scope die Eingabe für die Zuordnung und den Benutzernamenwert in die Eingabe. Dies zeigt, wie der Controller Daten in den Bereich schreiben kann.
In ähnlicher Weise kann der Controller das Verhalten dem Bereich anbringen, genau wie die Sayhello -Methode, die ausgelöst wird, wenn der Benutzer auf die Schaltfläche "Willkommen" klickt. Die Sayhello -Methode kann das Benutzername -Attribut lesen oder ein Grußattribut erstellen. Dies zeigt, dass die Eigenschaften des Umfangs automatisch aktualisiert werden, wenn sie an eine HTML -Eingabesteuerung gebunden sind.
Logischerweise beinhaltet das Anzeigen von {{Begrüßung}} die folgenden zwei Punkte:
Suchen Sie den Umfang mit dem Vorlagen -DOM -Knoten, der den Ausdruck {{Begrüßung}} definiert. In diesem Beispiel ist dieser Bereich dasselbe wie der in den MyController übergingende Bereich. (Wir werden später die Scope -Hierarchie diskutieren)
Der Begrüßungsausdruck wird durch den zuvor abgerufenen Bereich bewertet, und das Ergebnis wird dann als Wert des Textes verwendet, der das DOM -Element umschließt.
Wir können denken, dass Umfang und eigene Eigenschaften als Daten zum Rendern von Ansichten verwendet werden können. Der Umfang ist die Einzelquelle für alle Dinge, die sich ansehen.
Aus Sicht der Testbarkeit ist die Trennung von Controller und Sichtweise begeistert, da wir es uns ermöglichen, das Testverhalten (sich auf das Testen zu konzentrieren), ohne dass Details gestört werden.
Es ('sollte Hallo sagen', function () {var scopemock = {}; var cntl = new MyController (scopemock); // behaupten, dass der Benutzername vorgefüllt ist (Scopemock. erwarten (Scopemock.greeting). TOEqual ('Hallo Angular!');});4. Scope -Hierarchien (Scope -Hierarchien)
Jede Winkelanwendung hat und nur einen Wurzelbereich, kann jedoch mehrere untergeordnete Bereiche haben.
Eine Bewerbung kann mehrere untergeordnete Bereiche haben, da einige Richtlinien neue Kinderbereiche erstellen (siehe Dokumentation, um festzustellen, welche Richtlinien neue Bereiche wie NG-Repeat erstellen können). Wenn der neue Bereich erstellt wird, werden sie als Kinderumfang dem übergeordneten Bereich hinzugefügt. Auf diese Weise wird eine Baumstruktur, die dem DOM ähnelt, das sie angehängt werden, erzeugt.
Wenn Angular {{Benutzername}} bewertet, befasst es sich zunächst auf die Benutzername -Eigenschaft des mit dem aktuellen Element zugeordneten Umfangs. Wenn keine entsprechende Eigenschaft gefunden wird, sucht sie nach übergeordnetem Umfang nach oben, bis es den Wurzelbereich erreicht. In JavaScript wird dieses Verhalten als "Prototyp -Vererbung" bezeichnet, und der Kinderbereich wird typischerweise von ihrem Elternteil vererbt.
Dieses Beispiel zeigt den Umfang (Was ist es) und die Prototyp -Vererbung von Eigenschaften in der Anwendung.
<! DocType html> <html lang = "zh-cn" ng-App> <head> <meta charset = "utf-8"> <titels> scope-hierarchies </title> <style type = "text/cs"> .ng-cloak {display: keine; } .ng-scope {border: 1px gestrichelt rot; } </style></head><body><div ng-controller="MyController"> Manager: {{employee.name}} [{{department}}] <br/> Report: <ul> <li ng-repeat="employee in employee.reports"> {{employee.name}} [{{department}}] </li> </ul> <hr/> {{Begrüßung}} </div> <script src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> Funktion mycontroller ($ scope) {$ scope.department = "eine bestimmte Einheit"; $ scope.aMleee = {name: "my Little dada", berichtet: [{name: "lclao"}, {name: "wer^o^"}]}; } </script> </body> </html>Beachten Sie, dass Angular die NG-SCOPE-Klasse automatisch in Elemente einbringt, die sich um den Umfang halten. <Styles> wird im obigen Beispiel definiert, wodurch der Bereich des neuen Bereichs durch die rote gepunktete Linie hervorgehoben wird. Da Repeater den Ausdruck {{{Employee.Name}} bewertet, ist untergeordneter Umfang erforderlich, aber abhängig davon, welcher Umfang der Ausdruck bewertet wird, haben verschiedene Bereiche unterschiedliche Ergebnisse. In ähnlicher Weise wird der Wert von {{Abteilung}} aus dem Prototyp im Stammbereich vererbt. Nur wenn es es gibt, kann das Abteilungsattribut definiert werden.
5. Reichweite aus dem DOM abrufen (Reliefe vom DOM abrufen)
Umfang wird als $ Scope -Datenattribut an das DOM beigefügt und kann zum Abrufen für Debugging -Zwecke verwendet werden. (In der Anwendung ist es unmöglich, den Geltungsbereich auf diese Weise abzurufen.) Der Speicherort des an das DOM angeschlossenen Wurzelbereichs wird durch den Ort der NG-App-Anweisung definiert. Normalerweise wird NG-App in das <html> -Element platziert, kann aber auch in andere Elemente platziert werden, beispielsweise muss nur ein Teil der Ansicht durch Angular gesteuert werden.
Sehen Sie sich den Umfang in Debugger an:
1. Klicken Sie im Browser mit der rechten Maustaste auf das Element, an dem Sie interessiert sind, und wählen Sie "Element anzeigen". Wir können sehen, dass der Browser -Debugger die von uns ausgewählten Elemente hervorhebt.
2. Debugger ermöglicht es uns, über die Variable $ 0 in der Konsole auf das aktuell ausgewählte Element zugreifen zu können.
3. Wenn Sie den zugehörigen Bereich anzeigen möchten, können wir eingeben: Angular.element ($ 0) .scope () in der Konsole
6. Umfangsereignisverbreitung (Umfangsereignisausbreitung)
Umfang kann Ereignisse auf ähnliche Weise wie DOM -Ereignisse ausbreiten. Ereignisse können übertragen werden (http://code.angularjs.org/1.0.2/docs/api/ng.$rootscope.scope#$Broadcast) an Kinderbereich oder Emit (http://code.angularjs.org/1.0.2/docs/api/ng. USD.$.$. (Wenn der aktuelle Umfang angehört wird, wird es auch ausgeführt.)
<! DocType html> <html Lang = "zh-cn" ng-App> <head> <meta charset = "utf-8"> <titels> scope-event-Propagation </title> <style type = "text/cs"> .ng-cloak {display: none; · ng-click="$broadcast('MyEvent')">$broadcast("MyEvent")</button> <br/> middle scope count:{{count}} <ul> <li ng-repeat="item in [1,2]" ng-controller="MyController"> Leaf scope count:{{count}} </li> </ul> </li> </ul> </div> <script src = "../ Angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javaScript"> Funktion MyController ($ scope) {$ scope.count = 0; $ scope. $ on ("myevent", function () {$ scope.count ++;}); } </script> </body> </html>7. Umfangslebenszyklus (Umfangslebenszyklus)
Im normalen Ereignisstrom des Browsers wird der Browser das Ereignis erhält, und führt einen entsprechenden JavaScript -Rückruf aus. Sobald die Rückruffunktion ausgeführt wurde, zeichnet der Browser das DOM neu und kehrt in den Zustand zurück, in dem Sie weiterhin auf das Ereignis warten.
Wenn der Browser JavaScript -Code außerhalb der Winkelausführungsumgebung aufruft, bedeutet dies, dass Angular die Änderung des Modells nicht kennt. Um die Änderung des Modells korrekt zu behandeln, muss dieser Befehl die Angular Execution -Umgebung eingeben, indem die $ anwenden -Methode vorgenommen wird. Nur wenn sich das Modell in der $ Apply -Methode ändert, wird korrekt nach Angular gezählt. Eine Richtlinie hört beispielsweise für ein DOM-Ereignis wie das NG-Klick zu, das den Ausdruck in der $ Apply-Methode bewerten muss.
Nach der Bewertung des Ausdrucks führt die $ Apply -Methode eine $ digest aus. In der $ Digest -Phase prüft Scope alle von $ Watch angehaltenen Ausdrücke und vergleicht den aktuellen Wert mit dem alten Wert. Schmutzige Überprüfung ist asynchron. Dies bedeutet, dass die Zuweisungsanweisung (z. B. $ scope.username = "Angular") nicht sofort dazu führt, dass eine $ Watch benachrichtigt wird, aber die Benachrichtigung von $ Watch wird auf die $ Digest -Stufe verzögert. Diese Verzögerung ist erforderlich, da sie mehrere Modellaktualisierungen zu einer $ Watch -Benachrichtigung kombiniert, die sicherstellt, dass während des $ Watch -Benachrichtigungsprozesses kein anderer $ Watch ausgeführt wird. Wenn eine $ Watch den Wert des Modells ändert, erzwingt dies eine Erhöhung eines $ Digest -Zyklus.
1) Schöpfung (Erstellen Sie Umfang)
Der Stammbereich wird während des Anwendungsstartprozesses von $ Injector (http://code.angularjs.org/1.0.2/docs/api/auto.$injector) erstellt. Während des Verknüpfungsprozesses des Vorlage erstellen einige Richtlinien ein neues Kinderbereich.
2) Anmeldung von Beobachtungen (Register Watcher)
Während des Vorlageverknüpfungsprozesses registriert die Richtlinie $ Watch in Scope. Diese Uhren werden als Wert der Ausbreitung des Modells an das DOM verwendet.
3) Modellmutation (Modelländerungen)
Damit Änderungen korrekt erkannt werden, müssen wir sie in den Umfang einwickeln. $ Bewerben Sie sich. (Die Winkel -API hat dies implizit erledigt. Bei synchroner Arbeit im Controller oder asynchronen Arbeiten mit $ http oder $ Timeout ist kein zusätzlicher Antragsanruf erforderlich.)
4) Beobachtung der Mutation (Änderungsüberwachung)
Am Ende von $ Apply führt Angular einen $ Digest -Zyklus im Wurzelbereich aus, der sich an alle Kinderbereiche ausbreitet. Im Zyklus von $ digest werden alle mit $ watch registrierten Ausdrücke oder Funktionen überprüft, um festzustellen, ob sich das Modell geändert hat. Wenn die Änderung auftritt, wird der entsprechende $ Watch -Hörer aufgerufen.
5) Umfangszerstörung (Umfang Zerstörung)
Wenn kein Kinderumfang mehr erforderlich ist, liegt es in der Verantwortung des Kinderbereichsproduzenten, sie durch den Umfang zu zerstören. Dadurch wird die Ausbreitung des $ Digest -Anrufs in das Kinderbereich gestoppt, so dass das vom Child Scope -Modell verwendete Speicher von GC (Müllsammler) recycelt werden kann.
1. Bereiche und Richtlinien
Während der Kompilierungsphase stützt sich Compiler auf die DOM -Vorlagenübereinstimmung. Richtlinien können normalerweise in zwei Kategorien unterteilt werden:
Registrieren Sie den Hörer mithilfe der $ Watch-Methode. Wenn sich der Ausdruck (Wert) ändert, müssen solche Richtlinien benachrichtigt werden, um die Ansicht zu aktualisieren.
Die Listener-Richtlinie wie NG-Klick registriert einen Hörer in den DOM. Wenn der Hörer des DOM feuert, führt die Richtlinie den entsprechenden Ausdruck aus und aktualisiert die Ansicht mithilfe der $ Apply -Methode.
Wenn ein externes Ereignis (z. B. Benutzeraktion, Timer oder XHR) zu hören ist, muss der entsprechende Ausdruck über die $ Apply -Methode auf den Umfang angewendet werden, damit alle Hörer korrekt aktualisiert werden können.
2. Richtlinien, die Bereiche schaffen
In den meisten Fällen beeinflussen Richtlinie und Umfang gegenseitig, aber es wird keine neue Bereichsinstanz erstellt. Einige Richtlinien (wie NG-Controller und NG-Repeat) erzeugen jedoch einen neuen Bereich, der ein untergeordnetes Zielfernrohr an das entsprechende DOM-Element angeht. Wir betrachten den Umfang eines jeden DOM -Elements mithilfe von Angular.element (Adomelement) .scope ().
3. Controller und Bereiche
In den folgenden Fällen beeinflussen sich Umfang und Controller gegenseitig:
4. Umfang $ Watch Performance -Überlegungen (Umfang $ Watch Performance -Überlegungen)
In Angular ist es eine übliche Operation, eine schmutzige Überprüfung des Umfangs durchzuführen, um Änderungen der Attribute zu erkennen. Dies erfordert, dass die schmutzige Überprüfungsfunktion effizient sein muss. Achten Sie darauf, dass schmutzige Überprüfungsfunktionen keine DOM -Zugriffsvorgänge ausführen, da der DOM -Zugriff auf Größenordnungen langsamer ist als der Zugriff auf JavaScript -Objekteigenschaften.
Das obige sind die Informationen über AngularJS -Umfang. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!