Se si desidera chiamare un controller in un altro, sono disponibili quattro metodi
- $ rootScope. $ emit () e $ rootScope. $ broadcast ()
- Se il secondo controller è figlio, è possibile utilizzare la comunicazione figlio padre.
- Usa i servizi
- Tipo di hack - con l'aiuto di angular.element ()
1. $ rootScope. $ Emit () e $ rootScope. $ Broadcast ()
Il controller e il suo ambito possono essere distrutti, ma $ rootScope rimane nell'applicazione, ecco perché stiamo prendendo $ rootScope perché $ rootScope è genitore di tutti gli ambiti.
Se stai eseguendo la comunicazione da genitore a figlio e anche il bambino vuole comunicare con i suoi fratelli, puoi usare $ broadcast
Se si sta eseguendo la comunicazione da figlio a genitore, nessun fratello è invocato quindi è possibile utilizzare $ rootScope. $ Emit
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>
Codice Angularjs
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');
});
});
Nella console di codice sopra di $ emit 'childEmit' non chiamerà all'interno dei fratelli minori e chiamerà all'interno solo dei genitori, dove $ broadcast viene chiamato anche all'interno dei fratelli e dei genitori. Questo è il luogo in cui le prestazioni entrano in azione. $ Emit è preferibile, se si utilizza la comunicazione figlio-genitore perché salta alcuni controlli sporchi.
2. Se il secondo controller è figlio, è possibile utilizzare la comunicazione padre figlio
È uno dei metodi migliori, se vuoi fare una comunicazione genitore figlio dove un bambino vuole comunicare con un genitore immediato, allora non avrebbe bisogno di alcun tipo $ broadcast o $ emit ma se vuoi fare comunicazione da genitore a figlio, allora devi usa il servizio o $ broadcast
Ad esempio 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);
});
Ogni volta che si utilizza la comunicazione figlio per genitore, Angularjs cercherà una variabile all'interno del figlio. Se non è presente all'interno, sceglierà di visualizzare i valori all'interno del controllore padre.
3. Utilizzare i servizi
AngularJS supporta i concetti di "Separazione delle preoccupazioni" utilizzando l'architettura dei servizi. I servizi sono funzioni javascript e sono tenuti a svolgere solo attività specifiche, il che li rende una singola entità che è gestibile e verificabile. Servizi utilizzati per iniettare utilizzando il meccanismo di iniezione di dipendenza di Angularjs.
Codice Angularjs:
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");
});
Darà in uscita Hello Child World e Hello Parent World. Secondo i documenti angolari dei servizi Singletons - Ogni componente dipendente da un servizio ottiene un riferimento alla singola istanza generata dalla fabbrica di servizi .
4. Tipo di hack - con l'aiuto di angular.element ()
Questo metodo ottiene scope () dall'elemento con il suo metodo Id / unique class.angular.element () restituisce element e scope () fornisce la variabile $ scope di un'altra variabile usando la variabile $ scope di un controller all'interno di un'altra non è una buona pratica.
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);
}
});
Nel codice sopra i controller mostrano il proprio valore su HTML e quando si fa clic sul testo si ottengono i valori nella console di conseguenza. Se si fa clic sull'intervallo dei controller parent, il browser consolerà il valore di child e viceversa.