Se você deseja chamar um controlador para outro, existem quatro métodos disponíveis
- $ rootScope. $ emit () e $ rootScope. $ broadcast ()
- Se o Segundo controlador for filho, você poderá usar a comunicação filho pai.
- Use Serviços
- Tipo de hack - com a ajuda de angular.element ()
1. $ rootScope. $ Emit () e $ rootScope. $ Broadcast ()
O controlador e seu escopo podem ser destruídos, mas o $ rootScope permanece no aplicativo, é por isso que estamos usando o $ rootScope porque $ rootScope é o pai de todos os escopos.
Se você estiver realizando a comunicação de pai para filho e até o filho quiser se comunicar com seus irmãos, poderá usar $ broadcast
Se você estiver executando uma comunicação de filho para pai, sem irmãos envolvidos, você poderá 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');
});
});
No console de código acima, $ emit 'childEmit' não chamará dentro de irmãos filhos e chamará somente dentro de pai, onde $ broadcast também é chamado dentro de irmãos e pai.Este é o lugar onde o desempenho entra em ação. preferível, se você estiver usando a comunicação filho-pai, porque ignora algumas verificações sujas.
2. Se o Segundo controlador for filho, você poderá usar a comunicação Pai-Filho.
É um dos melhores métodos. Se você deseja fazer a comunicação entre pais e filhos, onde os filhos desejam se comunicar com os pais imediatos , não seria necessário nenhum tipo de transmissão ou emissão de $, mas se você deseja fazer comunicação entre pais e filhos, precisará use service ou $ broadcast
Por exemplo 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);
});
Sempre que você estiver usando a comunicação filho-pai, o Angularjs procurará uma variável dentro do filho. Se não estiver presente no interior, escolherá ver os valores no controlador pai.
Serviços 3.Use
O AngularJS suporta os conceitos de "Separação de preocupações" usando a arquitetura de serviços. Os serviços são funções javascript e são responsáveis por executar apenas tarefas específicas. Isso os torna uma entidade individual que pode ser mantida e testada . Serviços usados para injetar usando o mecanismo de injeção de dependência do 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");
});
Ele fornecerá a saída Hello Child World e Hello Parent World. De acordo com os documentos angulares dos serviços Singletons - Cada componente dependente de um serviço obtém uma referência à instância única gerada pela fábrica de serviços .
4.Kind of hack - com a ajuda de angular.element ()
Esse método obtém o scope () do elemento por seu método Id / exclusivo class.angular.element () retorna o elemento e o scope () fornece a variável $ scope de outra variável usando a variável $ scope de um controlador dentro de outro não é uma boa prática.
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);
}
});
No código acima, os controladores estão mostrando seu próprio valor em HTML e, quando você clica no texto, obtém valores no console de acordo. Se você clicar no período dos controladores pai, o navegador consola o valor de child e vice-versa.