Wie teile ich $scope-Daten zwischen Staaten im AngularJS-UI-Router ohne Dienste?

Teilen von $scope-Daten zwischen Zuständen im AngularJS-UI-Router

In AngularJS-Anwendungen, die UI-Router für die Zustandsverwaltung verwenden, gibt es möglicherweise eine Sie müssen $scope-Daten zwischen übergeordneten und untergeordneten Zuständen teilen. Wie können wir dies erreichen, ohne einen Dienst oder komplizierte Beobachter einzusetzen?

Verwendung der Vererbung der Ansichtshierarchie

AngularJS UI-Router bietet die Vererbung von Bereichseigenschaften nur in der untergeordneten Ansicht ist in der übergeordneten Ansicht verschachtelt. Dies bedeutet, dass die Vorlagen der untergeordneten Zustände in der Vorlage der übergeordneten Ansicht verschachtelt sein müssen.

Bedenken Sie beispielsweise die folgenden Zustandsdefinitionen:

.state("main", {
 controller:'mainController',
 url:"/main",
 templateUrl: "main_init.html"
})  
.state("main.1", {
 controller:'mainController',
 parent: 'main',
 url:"/1",
 templateUrl: 'form_1.html'
})  
.state("main.2", {
 controller:'mainController',
 parent: 'main',
 url: "/2",
 templateUrl: 'form_2.html'
})  

In diesem Szenario müssen die Ansichten der Untergeordnete Zustände („form_1.html“ und „form_2.html“) sind in der Ansicht des übergeordneten Zustands („main_init.html“) verschachtelt. Dies ermöglicht die Vererbung von $scope-Eigenschaften vom übergeordneten Status an die untergeordneten Status.

Verwendung von Referenztypen und Punktnotation

Um sicherzustellen, dass Daten gemeinsam genutzt werden, ist dies der Fall Es ist wichtig, einen Referenztyp im $scope des übergeordneten Controllers mithilfe der Punktnotation zu definieren. Zum Beispiel:

controller('mainController', function ($scope) {
  $scope.Model = $scope.Model || {Name : "xxx"};
})

Durch die Verwendung der Punktnotation stellen wir sicher, dass $scope.Model ein Referenztyp ist. Wenn in einem untergeordneten Zustand darauf zugegriffen wird, handelt es sich um dieselbe Instanz von $scope.Model, die im übergeordneten Zustand erstellt wurde, was den Datenaustausch erleichtert.

Beispiel

Im Beispiel Wie in der Frage angegeben, sind der Hauptcontroller und die untergeordneten Zustände für die Bereichsvererbung korrekt eingerichtet. Das Problem liegt in der unsachgemäßen Verwendung der Punktnotation. Durch Ändern des ng-Modells im untergeordneten Zustand, um auf $scope.Model.Name zu verweisen, wird die Datenfreigabe eingerichtet.

Das obige ist der detaillierte Inhalt vonWie teile ich $scope-Daten zwischen Staaten im AngularJS-UI-Router ohne Dienste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!