Una cosa che dovresti sapere è $ prefisso si riferisce a un metodo angolare, $$ prefissi si riferisce a metodi angolari che dovresti evitare di usare.
di seguito è riportato un modello di esempio e i suoi controller, esploreremo come $ broadcast / $ on può aiutarci a ottenere ciò che vogliamo.
<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>
I controller sono
app.controller('FirstCtrl', function($scope){
$scope.register = function(){
}
});
app.controller('SecondCtrl', function($scope){
});
La mia domanda è: come si passa il nome al secondo controller quando un utente fa clic su Register? Potresti trovare più soluzioni, ma quella che useremo sta usando $ broadcast e $ on.
$ broadcast vs $ emit
Quale dovremmo usare? $ broadcast canalizzerà verso tutti gli elementi dom per i bambini e $ emit canalizzerà la direzione opposta a tutti gli elementi dom degli antenati.
Il modo migliore per evitare di decidere tra $ emit o $ broadcast è di canalizzare da $ rootScope e usare $ broadcast a tutti i suoi figli. Il che rende il nostro caso molto più semplice poiché i nostri elementi dom sono fratelli.
Aggiunge $ rootScope e consente a $ broadcast
app.controller('FirstCtrl', function($rootScope, $scope){
$scope.register = function(){
$rootScope.$broadcast('BOOM!', $scope.name)
}
});
Nota che abbiamo aggiunto $ rootScope e ora stiamo usando $ broadcast (broadcastName, argomenti). Per broadcastName, vogliamo assegnargli un nome univoco in modo da poterlo prendere nel nostro secondo Ctrl. Ho scelto BOOM! solo per divertimento. Il secondo argomento "argomenti" ci consente di trasmettere valori agli ascoltatori.
Ricezione della nostra trasmissione
Nel nostro secondo controller, dobbiamo impostare il codice per ascoltare la nostra trasmissione
app.controller('SecondCtrl', function($scope){
$scope.$on('BOOM!', function(events, args){
console.log(args);
$scope.name = args; //now we've registered!
})
});
È davvero così semplice. Esempio live
Altri modi per ottenere risultati simili
Cerca di evitare l'uso di questa suite di metodi in quanto non è né efficiente né facile da mantenere, ma è un modo semplice per risolvere i problemi che potresti avere.
Di solito puoi fare la stessa cosa utilizzando un servizio o semplificando i tuoi controller. Non ne discuteremo in dettaglio, ma ho pensato di menzionarlo per completezza.
Infine, tieni presente che una trasmissione davvero utile da ascoltare è di nuovo "$ destroy", puoi vedere $ significa che è un metodo o un oggetto creato dai codici fornitore. Ad ogni modo $ destroy viene trasmesso quando un controller viene distrutto, potresti voler ascoltare questo per sapere quando il controller viene rimosso.