AngularJS-Controller-Controller korrekte Kommunikationsmethode_AngularJS

AngularJS ist ein sehr leistungsfähiges Front-End-MVC-Framework. Der Controller in AngularJS ist eine Funktion, die zum Hinzufügen zusätzlicher Funktionen zum Bereich der Ansicht ($scope) verwendet wird Objekt und benutzerdefiniertes Verhalten hinzufügen.

Wenn wir einen neuen Controller erstellen, hilft uns AngularJS dabei, ein neues $scope-Objekt zu generieren und an diesen Controller zu übergeben. In jedem Teil der AngularJS-Anwendung gibt es einen übergeordneten Bereich, auf der obersten Ebene. app befindet sich und ihr übergeordneter Bereich ist $rootScope.

$root jedes $scope zeigt auf $rootScope und $cope.$parent zeigt auf den übergeordneten Bereich.

Die Kommunikation zwischen Controllern besteht im Wesentlichen darin, wie der $scope, in dem sich der aktuelle Controller befindet, mit den $scopes auf anderen Controllern kommuniziert.

Es gibt normalerweise 3 Lösungen:

Mithilfe des Prinzips der Bereichsvererbung greift der untergeordnete Controller auf den Inhalt im übergeordneten Controller zu. Verwenden Sie Ereignisse in AngularJS, d. h. verwenden Sie $on, $emit, $broadcast für die Nachrichtenübermittlung. Verwenden Sie Dienste in AngularJS
Der erste Weg

Das heißt, Bereiche sind innerhalb von Bereichen verschachtelt und müssen in der tatsächlichen Entwicklung verschachtelt werden. Diese Methode ist jedoch nicht einfacher und direkter.

Wenn eine Eigenschaft in AngularJS im aktuellen Bereich nicht gefunden werden kann, wird sie standardmäßig im übergeordneten Bereich durchsucht. Wenn sie nicht gefunden werden kann, wird sie durchsucht, bis $rootScope gefunden wird. Wenn es in $rootScope nicht gefunden werden kann, wird das Programm weiterhin ausgeführt, aber die Ansicht wird nicht aktualisiert.

Beispiel

Javascript

//Javascript
app.controller('ParentController', function($scope) { 
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
//result
{"greeted":true, "name": "Ari Lerner"}

Der zweite Weg

Da Bereiche hierarchisch sind, können Bereichsketten zum Übergeben von Ereignissen verwendet werden.

Es gibt zwei Möglichkeiten, Ereignisse zu übermitteln: * $broadcast: Das ausgelöste Ereignis muss nach unten weitergegeben werden, um das gesamte Ereignissystem zu benachrichtigen (wodurch jeder Bereich die Verarbeitung dieses Ereignisses zulässt). * $emit: Wenn Sie ein globales Modul erinnern möchten, müssen Sie das Ereignis nach oben übergeben, wenn Sie einen übergeordneten Bereich (z. B. $rootscope) benachrichtigen müssen.

Verwenden Sie $on für den Bereich zur Ereignisüberwachung.

Beispiel

JavaScript

app.controller('ParentController', function($scope) { 
$scope.$on('$fromSubControllerClick', function(e,data){
console.log(data); // hello
});
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.$emit('$fromSubControllerClick','hello');
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
</div>

Ein weiteres Problem, über das ich hier sprechen möchte, ist das Leistungsproblem der Ereignisweitergabe. Wenn $broadcast $on zur Benachrichtigung aller Unterbereiche verwendet wird, treten hier Leistungsprobleme auf. Daher wird empfohlen, $emit $on zu verwenden Um die Leistung weiter zu verbessern, muss die definierte Ereignisbehandlungsfunktion zusammen mit der Zerstörung des Bereichs freigegeben werden.

Die Verwendung von $emit $on erfordert, dass wir den Ereignis-Listener an $rootScope binden, zum Beispiel:

JavaScript

angular
.module('MyApp')
.controller('MyController', ['$scope', '$rootScope', function MyController($scope, $rootScope) {
var unbind = $rootScope.$on('someComponent.someCrazyEvent', function(){
console.log('foo');
});
$scope.$on('$destroy', unbind);
}
]);

Diese Methode ist jedoch etwas umständlich und bereitet mir Unbehagen, wenn ich mehrere Funktionen zur Ereignisbehandlung definiere. Deshalb sollten wir sie verbessern

Verwenden Sie einen Dekorator, um eine neue Ereignisbindungsfunktion zu definieren:

JavaScript

angular
.module('MyApp')
.config(['$provide', function($provide){
$provide.decorator('$rootScope', ['$delegate', function($delegate){
Object.defineProperty($delegate.constructor.prototype, '$onRootScope', {
value: function(name, listener){
var unsubscribe = $delegate.$on(name, listener);
this.$on('$destroy', unsubscribe);
return unsubscribe;
},
enumerable: false
});
return $delegate;
}]);
}]);

Wenn wir dann die Event-Handler-Funktion im Controller definieren:

JavaScript

angular
.module('MyApp')
.controller('MyController', ['$scope', function MyController($scope) {
$scope.$onRootScope('someComponent.someCrazyEvent', function(){
console.log('foo');
});
}
]); 

Ich kann diesen Ansatz wärmstens empfehlen

Der dritte Weg

Mit den Merkmalen des Service-Singleton-Modus in AngularJS bietet Service (Service) eine Möglichkeit, Daten während des gesamten Lebenszyklus der Anwendung zu verwalten, zwischen Controllern zu kommunizieren und die Datenkonsistenz sicherzustellen.

Im Allgemeinen kapseln wir den Server, um eine Schnittstelle für Anwendungen bereitzustellen, um auf Daten zuzugreifen oder aus der Ferne mit Daten zu interagieren.

Beispiel

JavaScript

var myApp = angular.module("myApp", []);
myApp.factory('Data', function() {
return {
name: "Ting"
}
});
myApp.controller('FirstCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Jack";
}
});
myApp.controller('SecondCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Moby";
}
});

Das Obige ist die richtige Kommunikationsmethode für den AngularJS-Controller. Ich hoffe, sie kann jedem helfen.