Une chose que vous devez savoir est que $ prefix fait référence à une méthode angulaire, $$ prefixes fait référence aux méthodes angulaires que vous devez éviter d'utiliser.
ci-dessous est un exemple de modèle et ses contrôleurs, nous explorerons comment $ broadcast / $ on peut nous aider à réaliser ce que nous voulons.
<div ng-controller="FirstCtrl">
<input ng-model="name"/>
<button ng-click="register()">Register </button>
</div>
<div ng-controller="SecondCtrl">
Registered Name: <input ng-model="name"/>
</div>
Les contrôleurs sont
app.controller('FirstCtrl', function($scope){
$scope.register = function(){
}
});
app.controller('SecondCtrl', function($scope){
});
Ma question est de savoir comment transmettre le nom au deuxième contrôleur lorsqu'un utilisateur clique sur s'inscrire? Vous pouvez trouver plusieurs solutions, mais celle que nous allons utiliser utilise $ broadcast et $ on.
$ broadcast vs $ emit
Que devrions-nous utiliser? $ broadcast canalisera tous les éléments dom enfants et $ emit canalisera la direction opposée vers tous les éléments dom ancêtre.
La meilleure façon d'éviter de choisir entre $ emit ou $ broadcast est de canaliser depuis $ rootScope et d'utiliser $ broadcast à tous ses enfants. Ce qui rend notre cas beaucoup plus facile puisque nos éléments dom sont des frères et sœurs.
Ajout de $ rootScope et laisse $ broadcast
app.controller('FirstCtrl', function($rootScope, $scope){
$scope.register = function(){
$rootScope.$broadcast('BOOM!', $scope.name)
}
});
Notez que nous avons ajouté $ rootScope et maintenant nous utilisons $ broadcast (broadcastName, arguments). Pour broadcastName, nous voulons lui donner un nom unique afin que nous puissions saisir ce nom dans notre secondCtrl. J'ai choisi BOOM! juste pour le fun. Le second argument «arguments» nous permet de transmettre des valeurs aux écouteurs.
Recevoir notre émission
Dans notre deuxième contrôleur, nous devons configurer du code pour écouter notre diffusion
app.controller('SecondCtrl', function($scope){
$scope.$on('BOOM!', function(events, args){
console.log(args);
$scope.name = args; //now we've registered!
})
});
C'est vraiment aussi simple que cela. Exemple en direct
Autres moyens d'obtenir des résultats similaires
Essayez d'éviter d'utiliser cette suite de méthodes car elle n'est ni efficace ni facile à entretenir, mais c'est un moyen simple de résoudre les problèmes que vous pourriez avoir.
Vous pouvez généralement faire la même chose en utilisant un service ou en simplifiant vos contrôleurs. Nous ne discuterons pas de cela en détail, mais je pensais simplement le mentionner pour être complet.
Enfin, gardez à l'esprit qu'une diffusion vraiment utile à écouter est à nouveau «$ destroy», vous pouvez voir le $ signifie que c'est une méthode ou un objet créé par les codes du fournisseur. Quoi qu'il en soit, $ destroy est diffusé lorsqu'un contrôleur est détruit, vous pouvez l'écouter pour savoir quand votre contrôleur est supprimé.