Ik heb deze code $rootScope.$on('abc',function(event, next, current){ });in een tutorial.
Mijn vraag is wat is .$on()? Als het een functie is, waarom wordt deze dan voorafgegaan door $?
Antwoord 1, autoriteit 100%
$onis gerelateerd aan $broadcasten $emit– wat een manier is om code van andere plaatsen te activeren.
Het eerste dat u moet weten over $onis dat het een methode is van $scope
Het tweede dat u moet weten, is dat $ prefix verwijst naar een hoekige methode, $$ prefixen verwijst naar hoekige methoden die u beter niet kunt gebruiken.
Laten we nu in detail treden over wat $onis.
Hieronder staat een voorbeeldsjabloon en de bijbehorende controllers. We zullen onderzoeken hoe $broadcast/$onons kan helpen te bereiken wat we willen.
<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>
De controllers zijn
app.controller('FirstCtrl', function($scope){
$scope.register = function(){
}
});
app.controller('SecondCtrl', function($scope){
});
Mijn vraag aan jou is hoe geef je de naam door aan de tweede controller wanneer een gebruiker op registreren klikt? Je kunt meerdere oplossingen bedenken, maar degene die we gaan gebruiken is $broadcast en $on gebruiken.
$broadcast versus $emit
Welke moeten we gebruiken? $ Broadcast zal het kanalen naar alle kinderen DOM-elementen en $ emit kan de tegenovergestelde richting van alle voorouder DOM-elementen zenden.
De beste manier om te voorkomen dat u kunt beslissen tussen $ emit of $ uitzending, is om te kanaliseren van de $ Rootscope en gebruik $ uitzending aan al zijn kinderen. Dat maakt ons geval veel gemakkelijker omdat onze dom-elementen broers en zussen zijn.
Toevoegen van $ ROOTSCOPE EN LAAT $ BROADCAST
app.controller('FirstCtrl', function($rootScope, $scope){
$scope.register = function(){
$rootScope.$broadcast('BOOM!', $scope.name)
}
});
Opmerking We hebben $ RotScope toegevoegd en nu gebruiken we $ uitzending (broadcastname, argumenten). Voor BroadcastName willen we het een unieke naam geven, zodat we die naam in onze tweedectl kunnen vangen. Ik heb giek gekozen! voor de lol. Met de tweede argumenten ‘Argumenten’ kunnen we waarden doorgeven aan de luisteraars.
ontvangen onze uitzending
In onze tweede controller moeten we code instellen om naar onze uitzending te luisteren
app.controller('SecondCtrl', function($scope){
$scope.$on('BOOM!', function(events, args){
console.log(args);
$scope.name = args; //now we've registered!
})
});
Het is echt zo eenvoudig. Live voorbeeld
andere manieren om vergelijkbare resultaten te bereiken
Probeer te voorkomen dat u deze reeks methoden gebruikt, omdat het niet efficiënt noch gemakkelijk te onderhouden is, maar het is een eenvoudige manier om problemen te repareren die u mogelijk hebt.
U kunt meestal hetzelfde doen door een service te gebruiken of door uw controllers te vereenvoudigen. We zullen dit niet in detail bespreken, maar ik dacht ik vermeld het toch even voor de volledigheid.
Ten slotte, onthoud dat een echt nuttige uitzending om naar te luisteren ‘$destroy’ is. Je kunt zien dat de $ betekent dat het een methode of object is dat is gemaakt door de leverancierscodes. Hoe dan ook, $destroy wordt uitgezonden wanneer een controller wordt vernietigd, misschien wil je hiernaar luisteren om te weten wanneer je controller wordt verwijderd.
Antwoord 2
Het vorige antwoord is erg goed. Ik zou alleen een korte opmerking willen maken: deze $on soort luisteraar heeft een zeer belangrijke eigenschap: kan worden geannuleerd (gestopt).
Ik zal uitleggen wat ik bedoel:
De html:
<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>
<hr/><br/>
<button ng-click="disableEvents()">Disable events</button>
En de controller:
app.controller('SecondCtrl', function($scope){
$scope.cancelOn = $scope.$on('BOOM!', function(events, args){
console.log(args);
$scope.name = args; //now we've registered!
});
// this will cancel the event listening....
$scope.disableEvents = function(){
console.log('Canceling the event listener: ', $scope.cancelOn());
}
});
Als je op de knop “Registreren” drukt, kun je zien dat deze communiceert met de tweede controller. Druk nu op de knop “Gebeurtenissen uitschakelen”. Dit annuleert de luisteraar, de $on(…). Als u nu nogmaals op “Registreren” drukt, zult u merken dat de luisteraar niet langer naar dit soort gebeurtenissen luistert.