Eine eingehende Analyse der Rolle und des Lebenszyklus von $scope im AngularJS-Framework_AngularJS

$scope wird in der gesamten Angular-App-Anwendung verwendet und ist auch der Kontext für die Ausdrucksausführung. Mit $scope wird ein Kanal zwischen der Ansicht und dem Controller eingerichtet , Wenn die Daten geändert werden, wird $scope sofort aktualisiert, wenn sich $scope ändert, wird die Ansicht sofort neu gerendert

Mit $scope als Brücke kann sich der Geschäftscode der Anwendung vollständig im Controller befinden und die Daten werden im $scope des Controllers gespeichert.

$scope ist ein Objekt, das die Ansicht (ein DOM-Element) mit dem Controller verbindet. In unserer MVC-Struktur wird dieser $scope zum Modell, das einen an das DOM-Element (und seine untergeordneten Elemente) gebundenen Ausführungskontext bereitstellt.

Obwohl es etwas kompliziert klingt, ist $scope tatsächlich ein JavaScript-Objekt, auf das sowohl der Controller als auch die Ansicht zugreifen können, sodass wir es verwenden können, um Informationen zwischen den beiden weiterzugeben. In diesem $scope-Objekt speichern wir sowohl Daten als auch Funktionen, die in der Ansicht ausgeführt werden.

Jede Angular-Anwendung verfügt über einen $rootScope. Dieses $rootScope ist der Bereich der obersten Ebene, der dem DOM-Element entspricht, das das Direktivenattribut ng-app enthält.

Wenn $scope nicht explizit auf der Seite festgelegt ist, bindet Angular hier Daten und Funktionen. Das Beispiel im ersten Teil ist darauf angewiesen, dass es erfolgreich ausgeführt wird.

In diesem Beispiel verwenden wir $rootScope. In der Datei main.js fügen wir diesem Bereich ein Namensattribut hinzu. Durch die Ausführung dieser Funktion innerhalb der Funktion app.run stellen wir sicher, dass sie vor anderen Teilen der Anwendung ausgeführt wird. Sie können sich die Funktion app.run als die Hauptmethode Ihrer Angular-Anwendung vorstellen.

app.run(function($rootScope) {
 $rootScope.name = "Ari Lerner";
});

Jetzt können wir mit dem Vorlagenausdruck {{}} überall in der Ansicht auf dieses Namensattribut zugreifen, etwa so:

{{ name }}

$rootScope
Wenn die Angular-Anwendung startet und eine Ansicht generiert, wird das Root-NG-App-Element an $rootScope gebunden. $rootScope ist das Objekt der obersten Ebene aller $scopes und kann als globales Bereichsobjekt in Angular verstanden werden Daher ist es keine gute Idee, zu viel Logik oder Variablen daran anzuhängen, da dies dasselbe ist, als würde man den globalen Javascript-Bereich verschmutzen.

Die Rolle von $scope
Das $scope-Objekt fungiert in Angular als Datenmodell, was die Rolle des Modells im allgemeinen MVC-Framework darstellt. Es ist jedoch nicht genau dasselbe wie ein Datenmodell im üblichen Sinne, da $scope keine Verarbeitung durchführt Beim Betreiben von Daten wird lediglich eine Brücke zwischen der Ansicht und HTML hergestellt, wodurch eine benutzerfreundliche Kommunikation zwischen der Ansicht und dem Controller ermöglicht wird

Lassen Sie uns seine Funktionen und Funktionen weiter systematisch unterteilen:

Bietet Beobachter zur Überwachung von Änderungen im Datenmodell
Kann die gesamte App über Datenmodelländerungen benachrichtigen
Kann verschachtelt werden, um Geschäftsfunktionen und Daten zu isolieren
Kontextausführungsumgebung für Ausdrücke bereitstellen

Das Erstellen eines neuen Ausführungskontexts in Javascript erstellt tatsächlich einen neuen lokalen Kontext mithilfe einer Funktion. In Angular wird beim Erstellen eines neuen Bereichs für ein untergeordnetes DOM-Element tatsächlich ein neuer Bereich für das untergeordnete DOM-Element erstellt.

$scope-Lebenszyklus
Angular verfügt auch über das Konzept „Ereignis“. Wenn sich beispielsweise ein an das NG-Modell gebundener Eingabewert ändert oder auf eine NG-Klick-Schaltfläche geklickt wird, wird die Ereignisschleife von Angular gestartet Konzept in Angular. Da es nicht der Hauptschwerpunkt dieses Artikels ist, werde ich nicht auf Details eingehen. Wenn Sie interessiert sind, können Sie die Informationen hier im Angular-Ausführungskontext lesen An diesem Punkt wird die Ereignisschleife gestartet, Angular überwacht alle Objekte in der Anwendung und die Dirty-Value-Check-Schleife wird ebenfalls gestartet Der Lebenszyklus von $scope besteht aus 4 Phasen:

1. Erstellen Sie

Wenn ein Controller oder eine Direktive erstellt wird, verwendet Angular $injector, um einen neuen Bereich zu erstellen, und übergibt den Bereich dann daran, wenn der Controller oder die Direktive ausgeführt wird.

2. Link

Nachdem Angular gestartet wurde, werden alle $scope-Objekte an die Ansicht angehängt oder mit dieser verknüpft, und alle Funktionen, die $scope-Objekte erstellen, werden ebenfalls an die Ansicht angehängt. Diese Bereiche werden für die Ausführung registriert, wenn sich der Angular-Kontext ändert. Funktion. Das heißt, die Funktion $watch verwendet diese Funktionen oder wann die Ereignisschleife gestartet werden soll

3. Aktualisierung

Sobald die Ereignisschleife zu laufen beginnt, beginnt sie mit der Durchführung ihrer eigenen Dirty-Value-Erkennung. Sobald eine Änderung erkannt wird, wird die auf $scope angegebene Rückruffunktion ausgelöst

4. Zerstören

Wenn ein $scope in der Ansicht nicht mehr benötigt wird, bereinigt Angular ihn im Allgemeinen selbst. Natürlich kann er auch manuell über die Funktion $destroy() bereinigt werden.

ng-controller

Um explizit ein $scope-Objekt zu erstellen, müssen wir ein Controller-Objekt an das DOM-Element anhängen, indem wir das ng-controller-Anweisungsattribut verwenden:

ng-controller指令给所在的DOM元素创建了一个新的$scope 对象，并将这个$scope 对象包含进外层DOM元素的$scope 对象里。在上面的例子里，这个外层DOM元素的$scope 对象，就是$rootScope 对象。这个scope链是这样的：

现在，MyController 给我们建立了一个可以从DOM元素内部直接访问的$scope 对象。下面我们在的这个$scope 里创建一个person对象，在main.js中：

app.controller('MyController', function($scope) {
 $scope.person = {
  name: "Ari Lerner"
 };
});

现在我们可以在有ng-controller='MyController'属性的DOM元素的任何子元素里访问这个person 对象，因为它在$scope上。
除了一个例外，所有scope都遵循原型继承（prototypal inheritance），这意味着它们都能访问父scope们。对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父scope上去找，如果在父scope上也没找到，就会继续向上回溯，一直到$rootScope 上。

唯一的例外：有些指令属性可以选择性地创建一个独立的scope，让这个scope不继承它的父scope们。

举个例子，假设我们有一个ParentController ，含有一个person 对象，又有一个ChildController 想要访问这个对象：

app.controller('ParentController', function($scope) {
 $scope.person = {greeted: false};
});
 
app.controller('ChildController', function($scope) {
 $scope.sayHello = function() {
  $scope.person.greeted = true;
 }
});

当我们在view里把ChildController 绑定到ParentController 之下，在子元素里我们就能访问ParentController 创建的父scope的属性，像访问ChildController 自己的scope中的属性一样：

<div ng-controller="ParentController">
 <div ng-controller="ChildController">
  <input type="text" ng-model="person.name" placeholder="Name"></input>
  <a ng-click="sayHello()">Say hello</a>
 </div>
 {{ person }}
</div>