Sunday 29 November 2015

Talking between Controllers using $emit, $broadcast and $on in AngularJS

AngularJS provides $on, $emit, and $broadcast services for event-based communication between controllers.

7ZlRc6o6EMc/jY/tABG0j7XtaV/uzJ1x5pxzHyNEZIrEG7BqP303yQYIUFu97UV76oPDbmCT/PcHZMmA3Cy394KuFn/xiKUDz4m2A3I78Lzx2IF/6dhph++AJR2xSCLtcivHNHlm6MTr4nUSsdw6seA8LZKV7Qx5lrGwsHxUCL6xT5vz1O51RWPTY+WYhjRte38lUbHAaXlB5X9gSbwwPbvBlW6Z0fAxFnydYX8Dj8zVTzcvqYmFE906GMHX9s7YY9NTZo3omfOl5RAsr9TD2Sa2IBl9suw0yR5tfWZcREzUBkbuILmCcwgkj5bbG5bKBJvk6dH/eKW1VE+wDIey/wLPGxI/cD3HJZE/I+QCIzzRdI1zG3hDOZ5pyFdMN+bFzqQLogEZYEw2i6Rg0xUNZcsG2ATfolimYLlwqDLDZK/Syhc04hs04pTmUhVIwCQvBH8sMw9yTFZMJEtWMCFjJ1mMJ+IwmSgYot8xd+XCid8zDmHETqZetxKfYOrNraLNTcUdCKN9ixpz5hajmMq4jFwJDQeo9Tt1x7vU1j3/XzT/ACndK9QEpXRHfWqJabW1HHhBCp1Ocnlje0GsjrW+ugG6qbedg+y+kfQkZMcHqSV7W/MK67OV3XVs2YmRuBfZ8c349Wn3glOSffSnPmT6lR1XZ19f9uZDZtir7KY8sHRviphF17ICACuUWiShrR1MXOx+o0LK+MeSi0Wt0qAhFnTH10KlZs/ataAiZnhZ99qgLXpNVLMMrGtqfIKltEie7GF2CY09/M0TmEC14jS5wZyWVZcJoaeHV9WX7W8FIs7lyHWC0dh1x4E/HOFLwcTVkrTiKgxKFY4ko6tiOJaM0uiBDDXsbzI+kIyudfjRz4xL/5PYwFHuZUO97Ptiw2+klJg3w6FstAJ5/bEB7+wzYAMHtZcNVfb0xUYZ57+y0QrUIxtdheR5sqFE+2bjA9noqnZPjw0keC8bqpLpiw23UUsPTdxD2WgFGvXHRldtqOu/OVdjriAJ/l3LT+yq4UJ/x7+GE7zhals11j5ZzQSnUUhziFJWlDroaxXlGxDaH7qlZ56k6Q1Pud4NMJsX5sxai6N+uvyEEpfcqn2XA+DtCzrDgkGlWam+l7lGnCa6n4kYbjZ9BmJsCbtHJ0zXHD6RPOBjUh7/xMgnT50ppQx2AT6dD8auEYg04hzNHZjVjp8+vdrbJXcv

The key thing to remember when using $scope to fire your events, is that they will communicate only with immediate parent or child scopes only! Scopes aren’t always child and parent. We might have sibling scopes. Using $scope to fire an event will miss out sibling scopes, and just carry on up! They do not go sideways!

So to solve this problem we can use $broadcast and $emit.

$broadcast

We could fire an event down from ParentCtrl to SiblingOneCtrl using $broadcast:

$emit

If we wanted to communicate upwards, from SiblingOneCtrl to ParentCtrl, you guessed it, we can use $emit.

No comments:

Post a Comment