AngularJS selbst hat Methoden wie Richtlinien- und Servicedienst bereitgestellt, um die Freigabe und Wiederverwendung von Daten und Code zu realisieren. In der tatsächlichen Projektentwicklung möchten Sie jedoch möglicherweise aufgrund der faulen oder aus Gründen der Bequemlichkeitsgrad immer direkt den Datenaustausch zwischen zwei Controllern oder aufrufen Funktionen und Methoden kommunizieren. Hier sehen wir, welche Methoden diese Anforderung erfüllen können.
Singleton -Service
Singleton Service ist eine Daten- und Codefreigabemethode, die von AngularJS selbst unterstützt wird. Da es sich um einen Singleton handelt, greifen alle Controller auf dieselben Daten zu. Beispielsweise kann der folgende Dienst implementiert werden:
Angular .module ('App') .Service ('ObjectService', [ObjectService]); Funktion ObjectService () {var list = {}; return {get: function (id) {return list [id]; }, set: function (id, v) {list [id] = v; }};} In einem Controller kann der Datensatz von ObjectService.set('i', 1) in anderen Controllern über ObjectService.get('i') erhalten werden.
Rundfunk und Veranstaltungen
In AngularJs können Parameter übergeben werden, wenn Ereignisse ausgelöst und Sendungen gesendet werden. Diese Funktion kann verwendet werden, um die Datenaustausch zu realisieren. Es gibt drei Methoden zu Ereignissen und Sendungen, nämlich:
1. $ emit (): Auslöserereignis kann Daten nach oben weitergeben, z. B. den untergeordneten Controller an den übergeordneten Controller und den Controller an den $ rootscope
2. $ Broadcast (): Senden Sie eine Sendung, mit der Daten nach unten übergeben werden können. Zum Beispiel gibt der übergeordnete Controller Daten an den untergeordneten Controller, oder $ rootScope übergibt Daten an einen beliebigen Controller
3. $ on (): Hören Sie sich Ereignisse und Sendungen an und können $ emit und $ sendung erfassen
Die Kommunikation zwischen Controllern kann in drei Situationen unterteilt werden:
1. Kein direkter Association -Controller: Verwenden Sie $ rootscope. $ Emit (), $ rootscope. $ Boardcast () oder $ scope.
2. Elterncontroller für Child Controller: Der übergeordnete Controller verwendet $ Scope. $ Boradcast ( ) , um Daten zu senden
3. Child Controller für den Elterncontroller: Der untergeordnete Controller verwendet $ scope .
Hier sind die einfachen Verwendungen:
// One Controllerrangular .module ('App') .Controller ('OneController', ['$ Scope', OneController]); $ rootScope. $ scope.open (Daten);Elterncontroller
Wenn beide Controller denselben übergeordneten Controller gemeinsam teilen, können Datenaustausch und Kommunikation über den übergeordneten Controller durchgeführt werden. Zum Beispiel:
<div ng-controller = "parentController"> <div ng-controller = "ChildoneController"> </div> <div ng-controller = "Childtwocontroller"> </div> </div>
// Parent Controller Angular .module ('App') .Controller ('ParentController', ['$ scope', parentController); Funktion parentController ($ scope) {// Variable für die Übergabe von Daten $ scope.data = null;} // ChildController Angular .Module ('app'. ['$scope', ChildOneController]);function ChildOneController($scope){ // Data setting $scope.$parent.data = 1;}// ChildController angular .module('app') .controller('ChildTwoController', ['$scope', '$timeout', ChildTwoController]);function ChildtwoconTroller ($ scope, $ timeout) {$ timeout (function () {// data read console.log ($ scope. $ Parent.data);}, 1000);}Globale oder gemeinsame Variablen
AngularJS bietet eine Kapselung von zwei Variablen, $ Fenster und $ localStorage . Durch Ändern und Anhören dieser beiden Werte können Datenaustausch und Kommunikation zwischen Controllern erreicht werden. Die Methode lautet wie folgt:
// ein Controllerrangular .module ('App') .Controller ('OneController', ['$ scope', '$ window', OneConTroller); Funktion OneController ($ scope, $ window) {// Dateneinstellung $.data = 1;} // Other Controllrangular. ['$ scope', ein anderer controller]); functionothothotherController ($ scope) {// Anhören Sie $ scope.Tatsächlich kann diese Überwachungs- und Änderungsmethode auch in anderen Kommunikationsmethoden verwendet werden.
Elementbindung
In AngularJs können Sie die Controller -Instanz über ein Element erhalten. Auf diese Weise können Sie schnell erhalten
Ändern Sie die Daten in einem Controller oder rufen Sie die Methoden in diesem Controller auf. Zum Beispiel:
<div ng-controller = "AppController"> <div-id = "div-a"> </div> </div>
Sie können die Controller -Instanz über die folgenden Methoden erhalten:
var instance = angular.element (document.getElementById ('div-a')). Scope ();Anschließend können Sie diese Instanz verwenden, um die Methode des Controllers aufzurufen, um den Wert zu erhalten und zu ändern. Es kann nicht möglich sein, erfolgreich zu erhalten, ob das Element selbst einen Controller haben oder das übergeordnete Element des Elements einen Controller hat.
Hier geht es um Datenaustausch und Kommunikation zwischen Winkelcontrollern. Freunde, die sich für das Wissen über das Teilen von Daten in AngularJs interessieren, können gemeinsam lernen. Vielen Dank für Ihre Unterstützung bei Wulin.com.