Si vous souhaitez appeler un contrôleur dans un autre, quatre méthodes sont disponibles
- $ rootScope. $ emit () et $ rootScope. $ broadcast ()
- Si le deuxième contrôleur est enfant, vous pouvez utiliser la communication parent-enfant.
- Utiliser les services
- Type de piratage - avec l'aide de angular.element ()
1. $ rootScope. $ Emit () et $ rootScope. $ Broadcast ()
Le contrôleur et sa portée peuvent être détruits, mais $ rootScope reste dans l'application, c'est pourquoi nous prenons $ rootScope parce que $ rootScope est le parent de toutes les portées.
Si vous effectuez une communication du parent à l'enfant et que même l'enfant souhaite communiquer avec ses frères et sœurs, vous pouvez utiliser $ broadcast
Si vous effectuez une communication de l'enfant au parent, aucun frère ou sœur n'est impliqué, vous pouvez utiliser $ 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>
Code 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');
});
});
Dans la console de code ci-dessus, $ emit 'childEmit' n'appellera pas à l'intérieur des frères et sœurs enfants et il appellera uniquement à l'intérieur du parent, où $ broadcast sera également appelé à l'intérieur des frères et sœurs.C'est l'endroit où les performances entrent en action. préférable, si vous utilisez la communication de l'enfant à ses parents, car elle saute quelques vérifications sales.
2. Si le deuxième contrôleur est enfant, vous pouvez utiliser la communication enfant-parent
C'est l'une des meilleures méthodes, si vous voulez faire une communication parent-enfant là où l'enfant veut communiquer avec le parent immédiat, alors il n'aurait besoin d'aucune sorte $ broadcast ou $ emit mais si vous voulez faire la communication du parent à l'enfant, vous devez utiliser le service ou $ broadcast
Par exemple 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);
});
Chaque fois que vous utilisez la communication enfant-parent, Angularjs recherchera une variable à l'intérieur de l'enfant. Si elle n'est pas présente à l'intérieur, elle choisira de voir les valeurs à l'intérieur du contrôleur parent.
3.Utilisez les services
AngularJS prend en charge les concepts de "séparation des préoccupations" en utilisant l'architecture des services. Les services sont des fonctions javascript et sont chargés de faire des tâches spécifiques uniquement, ce qui en fait une entité individuelle qui est maintenable et testable .Services utilisés pour injecter en utilisant le mécanisme d'injection de dépendance d'Angularjs.
Code 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");
});
Il donnera la sortie Hello Child World et Hello Parent World. Selon Angular docs of services Singletons - Chaque composant dépendant d'un service obtient une référence à l'instance unique générée par la fabrique de services .
4.Hack of hack - avec l'aide de angular.element ()
Cette méthode obtient scope () de l'élément par sa méthode Id / unique class.angular.element () renvoie element et scope () donne la variable $ scope d'une autre variable en utilisant la variable $ scope d'un contrôleur à l'intérieur d'un autre n'est pas une bonne pratique.
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);
}
});
Dans le code ci-dessus, les contrôleurs affichent leur propre valeur en HTML et lorsque vous cliquerez sur du texte, vous obtiendrez des valeurs dans la console en conséquence. Si vous cliquez sur la portée des contrôleurs parents, le navigateur consolera la valeur de l'enfant et vice versa.