Drehumfang
In Webanwendungen, die mit Angular erstellt wurden, ist das Konzept des Umfangs in der ganzen Welt. Viele Anweisungen in der Winkelansicht erzeugen einen Umfang wie NG-App, NG-Controller usw. Dieser Umfang ist $scope (Version vor Angular1.2), das wir beim Schreiben von Controller-Konstruktoren injizieren. Es ist ein Konzept im View -Modell. Unser Datenmodell ist im Umfang definiert.
Winkelgruppe Pit
Menschen, die Angular benutzt haben, sollten einen Prozess durchlaufen, dh, als sie am Anfang ein Anfänger waren, sahen sie nur die Zwei-Wege-Bindung von Daten.
Scope Grube 1 in Winkel
Egal wie er es direkt benutzte, er würde es auf einmal binden. Wenn Sie Glück haben (der alte Vogel, der das Prinzip des Winkelbereichs ignoriert, ignoriert es), wird die Zwei-Wege-Bindung wie erwartet beginnen. Zu diesem Zeitpunkt sind wir auch der Meinung, dass wir so mächtig sind, dass wir "Zwei-Wege-Bindung" so schnell realisieren können, was eine neue Funktion ist, von der es nicht gehört wurde.
Warum heißt die oben genannte Aussage, dass die Zwei-Wege-Bindung aufgrund von Glück richtig funktioniert? Denn als Anfänger anfing, Angular zu lernen, lasen sie gerade das Tutorial und änderten den Code, um ihre geschäftlichen Anforderungen zu erfüllen. Selbst wenn es einige Spieler gibt, die am Anfang offizielle Dokumente lernen können, sind sie immer noch eine Minderheit. Daher verstehen die meisten Freunde, die gerade Angular gelernt haben, die Prinzipien nicht, aber sie glauben, dass sie bereits wissen, wie sie sie benutzen können.
Nachdem wir so viel gesagt haben, werfen wir einen Blick auf die Situation, in der ein Anfänger ein Datenmodell im Bereich angeben und es in Zwei-Wege-Richtungen binden. In diesem Fall werden Sie auf die oben genannte Gefahr stoßen. Schauen wir uns zuerst den Code an.
// html <div ng-controller = "äußere OUTERCTRL ($ scope) {$ scope.a = 1;} Funktion InnerCtrl () {}Der obige Code ist ein extrem einfaches Beispiel für die bid- und wechselseitige Bindung. Nachdem die Seite geladen wurde, wird 1 im externen Div und im internen Div angezeigt. Wenn die Inkrement -Taste gedrückt wird, werden Sie feststellen, dass nur der interne 1 zu 2 wird. Gleiches gilt für die Weiter drücke. Nur die interne Zahl erhöht sich. Zu diesem Zeitpunkt in Panik in Panik. Was ist mit der magischen Zwei-Wege-Bindung, auf die vereinbart wurde?
Scope Grube 2 in Winkel
Zu dieser Zeit war das Baby etwas emotional. Er ging stackoverflow und die offiziellen Dokumente hinauf. Schließlich stellte er fest, dass es tatsächlich eine Lösung gab, z. B. ein Schreiben von A als data.a eines Objekts:
// html <div ng-controller = "äußere OUTERCTRL ($ scope) {$ scope.data = {a: 1};} Funktion InnerCtrl () {}Dann stellte ich fest, dass es funktionieren konnte, und beide Zahlen wurden inkrementiert. Ich war der König der Zwei-Wege-Bindung ... und dann warf ich es beiseite und lernte den nächsten Teil des Tutorials weiter, ohne mich um die spezifischen Prinzipien zu kümmern. Dies ist eigentlich meine mentale Reise, als ich Angular zum ersten Mal gelernt habe. Ich schämte mich wirklich, die Anwendung durchzuführen und in der Produktionsumgebung bereitzustellen, bevor ich mich daran erinnerte, die internen Prinzipien zu untersuchen.
Die Grube muss immer gefüllt werden
Ich habe so viel Unsinn gesagt und bin auf die Grube getreten. Ich habe in die Pit -Füllstufe eingegeben, was bedeutet, dass diese Grube durch die als Objekte geschriebenen Attribute gelöst werden kann. Nachdem es das Prinzip kennen, ist es leicht zu verstehen. Der innere und äußere Bereich des Winkels wird durch die Prototypkette basierend auf JavaScript vererbt, und nur die Prototyp -Kette -Vererbungsmethode wird verwendet. Freunde mit einigen JavaScript -Grundlagen sollten sofort reagieren können. Der Referenztypwert im Subklassen-Prototyp-Objekt und der Referenztypwert im übergeordneten Instanzobjekt sind dieselbe Referenz, und der Grundtypwert überschreibt den Grundtypwert im übergeordneten Objekt. Dies ist eigentlich der Grund, warum eine Kombinationserbanz existiert, da nur die Verwendung von Prototyp-Kettenvererbung das Berufungsproblem bewirkt, das etwas weitreichend ist.
Kurz gesagt, hier können wir uns das erste Beispiel wie folgt ansehen:
Funktion oterctrl () {this.a = 1;} Funktion innerCtrl () {} var outer = new oterctrl (); innerCtrl.prototype = äußere; var inner = new Innerctrl (); inner.a = inner.a + 1; Hier setzen wir das Prototypobjekt des Konstruktors des internen Controllers auf ein externes Zielfernrohr, so dass das erzeugte interne Bereichsobjekt die Eigenschaft A im externen Objekt Außen erbt. Diese Eigenschaft ist ein Grundtypwert. Bei Zugriff auf die Eigenschaft A des internen Objekts wird das interne Objekt selbst keine solchen Attribute aufweist, es wird von seinem Prototypobjekt nachgeschlagen. Es gibt ein solches Attribut im externen Prototypobjekt, daher ist der Rückgabewert kein Problem. Wenn wir der Eigenschaft A des internen Bereichsobjekts einen Wert zuweisen, wird das Problem auftreten. inner.a = inner.a + 1; Diese Aussage fährt tatsächlich aus dem oben genannten Prozess fort, um den Wert der A -Eigenschaft zu ermitteln, und weist dann den zurückgegebenen Wert der A -Eigenschaft des internen Bereichsobjekts zu. Da die A -Eigenschaft nicht vorhanden ist, wird eine Grundtyp -Eigenschaft von A erstellt, wodurch die A -Eigenschaft im äußeren Zielfernrohr Außen blockiert wird, und diese Grube kommt heraus.
Wenn wir das Attribut "Basis -Typ Value" durch das Attribut "Referenztyp" ersetzen, kann das Problem gelöst werden, da die entsprechenden Attribute der beiden Objekte denselben Referenztypwert sind und unabhängig davon, wo es geändert wird, auf allen Objekten reflektiert wird, die sich darauf beziehen.
Zusammenfassen
Im obigen dreht sich alles um die Fallstricke, auf die in Angular beachtet werden muss. Ich hoffe, der Inhalt dieses Artikels wird für alle hilfreich sein, um den Geltungsbereich in Angular zu lernen.