|
| 1 | +--- |
| 2 | +layout: sideMenu |
| 3 | +title: "2 - Event dispatching" |
| 4 | +description: "" |
| 5 | +group: nav-contrib-front |
| 6 | +menu: nav-contrib-front |
| 7 | +--- |
| 8 | +<!-- |
| 9 | +Licensed under the Apache License, Version 2.0 (the "License"); |
| 10 | +you may not use this file except in compliance with the License. |
| 11 | +You may obtain a copy of the License at |
| 12 | +
|
| 13 | +http://www.apache.org/licenses/LICENSE-2.0 |
| 14 | +
|
| 15 | +Unless required by applicable law or agreed to in writing, software |
| 16 | +distributed under the License is distributed on an "AS IS" BASIS, |
| 17 | +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 18 | +See the License for the specific language governing permissions and |
| 19 | +limitations under the License. |
| 20 | +--> |
| 21 | + |
| 22 | +# Event dispatching in the Angular Source Code |
| 23 | + |
| 24 | +<br/> |
| 25 | +AngularJS provides an Event dispatching system allow the communication between controllers or services and controllers. |
| 26 | + |
| 27 | +`$broadcast` dispatches the event downwards through the child scopes |
| 28 | + |
| 29 | +`$emit` dispatches the event upwards through the scope hierarchy |
| 30 | + |
| 31 | +`$on` catches the event passing by that scope |
| 32 | + |
| 33 | +<br/> |
| 34 | +You can usually see it being used from `$rootScope` or `$scope` |
| 35 | + |
| 36 | +``` |
| 37 | +$scope.$broadcast('eventName', arg); |
| 38 | +$rootScope.$broadcast('eventName', arg); |
| 39 | +
|
| 40 | +$scope.$emit('eventName', arg); |
| 41 | +$rootScope.$emit('eventName', arg); |
| 42 | +
|
| 43 | +$scope.$on('eventToCatch', function); |
| 44 | +$rootScope.$on('eventToCatch', function); |
| 45 | +``` |
| 46 | + |
| 47 | +Now, there is a few things to know about using it from `$rootScope`: |
| 48 | + |
| 49 | +* Both `$rootScope.$emit` and `$rootScope.$broadcast` go through child scopes since `$rootScope` do not have a parent |
| 50 | +* `$rootScope.$emit` can only be received by `$rootScope.$on` |
| 51 | +* `$rootScope.$broadcast` can be received by `$rootScope.$on` and `$scope.$on` |
| 52 | +* `$rootScope.$on` listener needs to be removed by hand (Memory leak if forgotten) |
| 53 | + |
| 54 | + |
| 55 | +#### How we are using it in the project |
| 56 | + |
| 57 | +* Usage of event dispatching should be limited if possible |
| 58 | +* We only use `$rootScope.$broadcast` and `$scope.$on` for event dispatching/catching |
| 59 | + |
| 60 | + |
| 61 | +#### Performances |
| 62 | + |
| 63 | +Using `$broadcast` might seem not optimum if we consider the description we have above. |
| 64 | + |
| 65 | +However it is optimized to only go through branches that have a matching event binding. |
| 66 | +(cf. [this post](http://www.bennadel.com/blog/2724-scope-broadcast-is-surprisingly-efficient-in-angularjs.htm)) |
0 commit comments