Si desea llamar un controlador a otro, hay cuatro métodos disponibles
- $ rootScope. $ emit () y $ rootScope. $ broadcast ()
- Si el segundo controlador es hijo, puede utilizar la comunicación padre-hijo.
- Usar servicios
- Tipo de pirateo: con la ayuda de angular.element ()
1. $ rootScope. $ Emit () y $ rootScope. $ Broadcast ()
El controlador y su alcance pueden destruirse, pero $ rootScope permanece en toda la aplicación, por eso estamos tomando $ rootScope porque $ rootScope es el padre de todos los ámbitos.
Si está realizando una comunicación de padre a hijo e incluso el niño quiere comunicarse con sus hermanos, puede usar $ broadcast
Si está realizando una comunicación de hijo a padre, no se invocan hermanos, entonces puede usar $ 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>
Código 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');
});
});
En la consola de código anterior de $ emit, 'childEmit' no llamará dentro de los hermanos menores y solo llamará dentro de los padres, donde $ broadcast también se llamará dentro de los hermanos y los padres. Este es el lugar donde el rendimiento entra en acción. $ Emit es preferible, si está utilizando comunicación de niño a padre porque omite algunos cheques sucios.
2. Si el segundo controlador es hijo, puede utilizar la comunicación Hijo-padre
Es uno de los mejores métodos, si desea comunicarse con los padres de los niños donde el niño quiere comunicarse con los padres inmediatos, entonces no necesitaría ningún tipo de $ broadcast o $ emit, pero si desea comunicarse de padres a hijos, entonces debe use el servicio o $ broadcast
Por ejemplo 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);
});
Siempre que esté utilizando la comunicación de niño a padre, Angularjs buscará una variable dentro del niño. Si no está presente en el interior, elegirá ver los valores dentro del controlador padre.
3.Utilice servicios
AngularJS admite los conceptos de "separación de preocupaciones" utilizando la arquitectura de servicios. Los servicios son funciones de JavaScript y son responsables de realizar solo tareas específicas. Esto los convierte en una entidad individual que es mantenible y comprobable servicios solían inyectarse usando el mecanismo de inyección de dependencia de Angularjs.
Código 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á salida Hello Child World y Hello Parent World. De acuerdo con documentos angulares de servicios Singletons: cada componente dependiente de un servicio obtiene una referencia a la instancia única generada por la fábrica de servicios .
4.Tipo de pirateo: con la ayuda de angular.element ()
Este método obtiene el alcance () del elemento por su Id / unique class.angular.element () el método devuelve el elemento y el alcance () da la variable $ scope de otra variable usando la variable $ scope de un controlador dentro de otro no es una buena práctica.
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);
}
});
En el código anterior, los controladores muestran su propio valor en Html y cuando haga clic en el texto obtendrá los valores en la consola en consecuencia. Si hace clic en el intervalo de los controladores principales, el navegador consolará el valor de child y viceversa.