Wie teile ich Daten zwischen AngularJS-UI-Router-Zuständen ohne Dienste oder Beobachter?

Teilen von $scope-Daten zwischen AngularJS-UI-Router-Zuständen ohne Dienste oder Watcher

In UI-Router kann es schwierig sein, Daten zwischen den $scope eines zu teilen Hauptcontroller und seine untergeordneten Zustände, ohne auf Dienste oder Beobachter im übergeordneten Controller angewiesen zu sein.

Lösung:

Die Der Schlüssel liegt im Verständnis der Beziehung zwischen AngularJS-Bereichen und UI-Router-Ansichten:

• Bereichsvererbung nur nach Ansichtshierarchie:Bereiche werden in der Statuskette nur dann vererbt, wenn die Statusansichten dies auch tun verschachtelt.
• Geltungsbereiche verstehen: Untergeordnete Bereiche sind normalerweise prototypisch Von übergeordneten Bereichen erben. Verwendung von „.“ Notation (z. B. Model.PropertyName) stellt diese Vererbung sicher.

Technische Implementierung:

1. Verschachtelte Ansichten definieren: Stellen Sie sicher, dass untergeordnete Statusansichten verschachtelt sind innerhalb der übergeordneten Ansicht.
2. Referenztyp verwenden Werte:Verwenden Sie in Ihrem $scope-Modell Objekte oder Referenzen, die als Referenz übergeben werden, anstelle von primitiven Werten.
3. Verwenden Sie die Punktnotation:Verwenden Sie in Ihren ng-Modelldefinitionen Punktnotation, um die prototypische Vererbung sicherzustellen (z. B. Model.PropertyName anstelle von PropertyName).

Beispiel:

Betrachten Sie die folgende UI-Router-Statusdefinition:

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

Initialisieren Sie im mainController das gemeinsam genutzte Datenmodell wie folgt:

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

Verwenden Sie in Ihren untergeordneten Statusvorlagen ng-model mit Punktnotation, um auf die freigegebenen Elemente zuzugreifen Daten:

<input type="text" ng-model="Model.Name">

Indem Sie diese Schritte befolgen, können Sie Daten effektiv zwischen $scopes in UI-Router-Zuständen austauschen, ohne dass Dienste oder Beobachter in übergeordneten Controllern erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie teile ich Daten zwischen AngularJS-UI-Router-Zuständen ohne Dienste oder Beobachter?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!