Wenn Sie einen Controller in einen anderen aufrufen möchten, stehen vier Methoden zur Verfügung
- $ rootScope. $ emit () und $ rootScope. $ Broadcast ()
- Wenn der zweite Controller untergeordnet ist, können Sie die untergeordnete untergeordnete Kommunikation verwenden.
- Verwenden Sie Dienste
- Art von Hack - mit Hilfe von angle.element ()
1. $ rootScope. $ Emit () und $ rootScope. $ Broadcast ()
Der Controller und sein Bereich können zerstört werden, aber $ rootScope bleibt in der gesamten Anwendung erhalten. Aus diesem Grund verwenden wir $ rootScope, da $ rootScope allen Bereichen übergeordnet ist.
Wenn Sie eine Kommunikation zwischen Eltern und Kind durchführen und sogar das Kind mit seinen Geschwistern kommunizieren möchte, können Sie $ Broadcast verwenden
Wenn Sie eine Kommunikation vom Kind zum Elternteil durchführen und keine Geschwister beteiligt sind, können Sie $ rootScope. $ Emit verwenden
HTML
<body ng-app="myApp">
<div ng-controller="ParentCtrl" class="ng-scope">
// ParentCtrl
<div ng-controller="Sibling1" class="ng-scope">
// Sibling first controller
</div>
<div ng-controller="Sibling2" class="ng-scope">
// Sibling Second controller
<div ng-controller="Child" class="ng-scope">
// Child controller
</div>
</div>
</div>
</body>
Angularjs Code
var app = angular.module('myApp',[]);//We will use it throughout the example
app.controller('Child', function($rootScope) {
$rootScope.$emit('childEmit', 'Child calling parent');
$rootScope.$broadcast('siblingAndParent');
});
app.controller('Sibling1', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling one');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('Sibling2', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling two');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('ParentCtrl', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside parent controller');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
In der obigen Codekonsole von $ emit ruft 'childEmit' nicht innerhalb von untergeordneten Geschwistern auf und es wird nur innerhalb von Eltern aufgerufen, wobei $ Broadcast auch innerhalb von Geschwistern und Eltern aufgerufen wird. Dies ist der Ort, an dem die Leistung in eine Aktion einfließt. $ Emit ist Vorzuziehen, wenn Sie die Kommunikation zwischen Kind und Eltern verwenden, da einige schmutzige Überprüfungen übersprungen werden.
2. Wenn der zweite Controller untergeordnet ist, können Sie die untergeordnete übergeordnete Kommunikation verwenden
Dies ist eine der besten Methoden. Wenn Sie eine Kommunikation zwischen Eltern und Kindern durchführen möchten, bei der das Kind mit den unmittelbaren Eltern kommunizieren möchte, ist keine Übertragung oder Ausgabe erforderlich. Wenn Sie jedoch eine Kommunikation zwischen Eltern und Kindern durchführen möchten, müssen Sie dies tun Verwenden Sie entweder Service oder $ Broadcast
Zum Beispiel HTML: -
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
</div>
</div>
Angularjs
app.controller('ParentCtrl', function($scope) {
$scope.value='Its parent';
});
app.controller('ChildCtrl', function($scope) {
console.log($scope.value);
});
Wenn Sie die Kommunikation zwischen Kind und Eltern verwenden, sucht Angularjs nach einer Variablen im Kind. Wenn sie im Inneren nicht vorhanden ist, werden die Werte im übergeordneten Controller angezeigt.
3.Verwenden Sie Dienste
AngularJS unterstützt die Konzepte der "Trennung von Bedenken" mithilfe der Dienstarchitektur . Services sind Javascript-Funktionen und nur für bestimmte Aufgaben verantwortlich. Dies macht sie zu einer einzelnen Entität, die gewartet und getestet werden kann. Services, die zum Injizieren mit dem Abhängigkeitsinjektions-Mekahnismus von Angularjs verwendet werden.
Angularjs Code:
app.service('communicate',function(){
this.communicateValue='Hello';
});
app.controller('ParentCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Parent World");
});
app.controller('ChildCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Child World");
});
Es werden die Ausgaben Hello Child World und Hello Parent World ausgegeben. Gemäß Angular Docs of Services Singletons - Jede von einem Service abhängige Komponente erhält einen Verweis auf die einzelne Instanz, die von der Service Factory generiert wurde .
4. Art des Hacks - mit Hilfe von angle.element ()
Diese Methode ruft scope () vom Element ab, indem sie die ID / unique class.angular.element () -Methode zurückgibt. Scope () gibt die $ scope-Variable einer anderen Variablen unter Verwendung der $ scope-Variablen eines Controllers in einem anderen an. Dies ist keine gute Vorgehensweise.
HTML: -
<div id='parent' ng-controller='ParentCtrl'>{{varParent}}
<span ng-click='getValueFromChild()'>Click to get ValueFormChild</span>
<div id='child' ng-controller='childCtrl'>{{varChild}}
<span ng-click='getValueFromParent()'>Click to get ValueFormParent </span>
</div>
</div>
Angularjs: -
app.controller('ParentCtrl',function($scope){
$scope.varParent="Hello Parent";
$scope.getValueFromChild=function(){
var childScope=angular.element('#child').scope();
console.log(childScope.varChild);
}
});
app.controller('ChildCtrl',function($scope){
$scope.varChild="Hello Child";
$scope.getValueFromParent=function(){
var parentScope=angular.element('#parent').scope();
console.log(parentScope.varParent);
}
});
Im obigen Code zeigen Controller ihren eigenen Wert in HTML an. Wenn Sie auf Text klicken, erhalten Sie entsprechende Werte in der Konsole. Wenn Sie auf den Bereich der übergeordneten Controller klicken, wird der Wert von child und umgekehrt vom Browser konsolidiert.