Wie kann ich Daten effektiv zwischen AngularJS-Controllern teilen?

Daten zwischen AngularJS-Controllern teilen

AngularJS ist ein beliebtes Framework zum Erstellen von Single-Page-Anwendungen. Oft ist es notwendig, Daten zwischen Verantwortlichen auszutauschen. Ein häufiges Beispiel ist ein mehrstufiges Formular, bei dem in einem Schritt eingegebene Daten später an mehreren Orten verwendet werden.

Das Problem

Bedenken Sie den folgenden Code:

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="FirstName">
    <br>Input is : <strong>{{FirstName}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
    Input should also be here: {{FirstName}}
</div>

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){
    var FirstName = '';
    return FirstName;
});

myApp.controller('FirstCtrl', function( $scope, Data ){

});

myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

In diesem Code werden die in das Eingabefeld im FirstCtrl-Controller eingegebenen Daten im SecondCtrl-Controller nicht automatisch aktualisiert. Dies liegt daran, dass die Datenfabrik einen primitiven Wert zurückgibt (Vorname ist eine Zeichenfolge) und keine Objektreferenz.

Die Lösung

Eine einfache Lösung besteht darin, die Fabrik zu haben ein Objekt zurückgeben und die Controller mit einer Referenz auf dasselbe Objekt arbeiten lassen:

myApp.factory('Fact', function(){
  return { Field: '' };
});

myApp.controller('FirstCtrl', function( $scope, Fact ){
  $scope.Alpha = Fact;
});

myApp.controller('SecondCtrl', function( $scope, Fact ){
  $scope.Beta = Fact;
});

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="Alpha.Field">
    First {{Alpha.Field}}
</div>

<div ng-controller="SecondCtrl">
    <input type="text" ng-model="Beta.Field">
    Second {{Beta.Field}}
</div>

Bei diesem Ansatz teilen sich beide Controller eine Referenz auf dasselbe Objekt, und Änderungen, die am Objekt in einem Controller vorgenommen werden, werden automatisch im anderen Controller widergespiegelt.

Erweiterte Optionen

Für komplexere Szenarien können Sie Getter und Setter zur Steuerung verwenden Zugriff auf die geteilten Daten. Dieser Ansatz gibt Ihnen mehr Kontrolle darüber, wie die Daten aktualisiert werden, und kann dazu beitragen, eine Fehlfunktion zu verhindern.

Fazit

Der Datenaustausch zwischen AngularJS-Controllern ist eine häufige Aufgabe. Wenn Sie die verschiedenen verfügbaren Techniken verstehen, können Sie den Ansatz wählen, der Ihren spezifischen Anwendungsanforderungen am besten entspricht.

Das obige ist der detaillierte Inhalt vonWie kann ich Daten effektiv zwischen AngularJS-Controllern teilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!