Teilen Sie Daten zwischen Controllern in AngularJS
- Teilen Sie Daten zwischen übergeordneten und untergeordneten Controllern in AngularJS
- Teilen Sie Daten zwischen Controllern mit Factory oder Service in AngularJS
Wir können mehrere Methoden verwenden, um Daten zwischen Controllern in AngularJS auszutauschen, aber hier werden wir nur zwei Möglichkeiten diskutieren. Die erste Möglichkeit besteht darin, Variablen zu erfassen. Die zweite Möglichkeit besteht darin, eine factory oder einen Services zu verwenden.
Teilen Sie Daten zwischen übergeordneten und untergeordneten Controllern in AngularJS
Der Bereich eines untergeordneten Controllers erbt den Bereich des übergeordneten Controllers, sodass Daten einfach durch Verwendung der Controller-Vererbung geteilt werden können.
Wenn eine untergeordnete Komponente in einer übergeordneten Komponente verschachtelt ist, kann die untergeordnete Komponente auf Daten von der übergeordneten Komponente zugreifen.
Dies wird durch die Verwendung von bidirektionaler Datenbindung erreicht. Die übergeordnete Komponente kann Daten entweder mithilfe einer Eigenschaftsbindung oder einer Ereignisbindung an die untergeordnete Komponente übergeben.
Das untergeordnete Element kann diese Daten dann mithilfe einer Eigenschaftsbindung oder einer Ereignisbindung auf seinem Controller an das übergeordnete Element zurückgeben. Dieses Muster wird auch für die gemeinsame Nutzung von Auswahlen zwischen verwandten Komponenten verwendet.
Das Scope-Objekt
Das Bereichsobjekt wird erstellt, wenn ein Controller instanziiert wird, und es enthält sowohl Modell- als auch Ansichtseigenschaften.
Die Modelleigenschaft enthält oder speichert alle Informationen, die mit anderen Controllern geteilt werden. Andererseits enthält oder speichert die Ansichtseigenschaft Informationen zum Anzeigen dieser Informationen auf dem Bildschirm (z. B. HTML).
Teilen Sie Daten zwischen Controllern mit Factory oder Service in AngularJS
In AngularJS können wir Daten zwischen Controllern mithilfe von Factorys oder Services austauschen.
Factorys geben ein Objekt mit den Methoden zum Erstellen und Aktualisieren von Objekten zurück. Wir können Fabriken verwenden, wenn wir ein neues Objekt in einem Controller erstellen und es mit einem anderen Controller teilen möchten.
Dienste werden verwendet, wenn wir Daten zwischen Controllern und anderen JavaScript-Dateien austauschen möchten.
Zusammenfassend lässt sich sagen, dass AngularJS-Factories und -Services JS-Module sind, die einen bestimmten Zweck erfüllen und sowohl Methoden als auch Eigenschaften enthalten.
Sie können über Abhängigkeitsinjektion in andere Komponenten injiziert werden. Wir können eine gemeinsam genutzte Variable in einer Factory definieren, sie in beide Controller einfügen und in dieser Methode Scope-Variablen mit Factory-Daten verknüpfen.
Wir müssen die folgenden Schritte ausführen.
-
Fabrik oder Service registrieren.
-
Erstellen Sie einen Dienst oder eine Fabrik, die für das Abrufen der Daten verantwortlich ist.
-
Fügen Sie den Dienst oder die Fabrik zur Anbieterliste des Moduls hinzu.
-
Erstellen Sie einen Controller mit einer Funktion, die den Dienst verwendet.
Nachfolgend finden Sie ein Beispiel, das uns dabei helfen soll zu verstehen, wie Daten zwischen Verantwortlichen auf die beiden oben beschriebenen Arten ausgetauscht werden können.
JavaScript-Code:
var myApp = angular.module('myApp', []);
myApp.service('demo', [function () {
'use strict';
this.pointtot = {hello: 'Adil'};
}]);
myApp.controller('Ctrl1', ['$scope', 'demo', function($scope, demo) {
$scope.myPointtot = demo.pointtot;
}]);
myApp.controller('Ctrl2', ['$scope', 'demo', function($scope, demo) {
$scope.yourPointtot = demo.pointtot;
}]);
HTML Quelltext:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.2.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Example of sharing data between controllers</h1>
<div ng-controller="Ctrl1">
<p>Write something in Controller 1 <input ng-model="myPointtot.hello" type="text" /></p>
</div>
<div ng-controller="Ctrl2">
<h4>Everything you write in controller 1, it will be copied to controller 2 and vice versa</h4>
<p>Write something in Controller 2 <input ng-model="yourPointtot.hello" type="text" /></p>
</div>
</body>
</html>
Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook