Source: http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html
The scope in Angularjs has a very hierarchical and well-nested structure. Each of them has a major $rootScope
(also say the corresponding angular application or ng-app
), and then all the other scope parts are inherited from this $rootScope
, or are nested under the main scope. Many times, you will find that these scopes do not share variables or that they do not inherit anything from another prototype.
So how do you communicate between scopes in this case? One option is to create a singleton service within the application scope and then handle all child scope traffic through the service.
There is another option in Angularjs: Handling traffic through events in the scope. But there are some limitations to this approach; For example, you can't propagate events extensively across all monitoring scopes. You must choose whether to communicate with the parent scope or the child scope.
$on, $emit, and $broadcast make it easy to transfer event and data between controllers.
- $emit can only pass event and data to the parent controller
- $broadcast can only pass event and data to child controller
- $on for receiving event and data
Examples are as follows
HTML code
<div ng-controller= "Parentctrl" > <!--parent-to- <div ng-controller= "Selfctrl" > <!-- Self- -<a ng-click= "click ()" >click me</a> <div ng-controller= "Childctrl" ></div> <!--children- </div> <div ng-controller= "Broctrl" ></div> <!--level-to- </div>
JS Code
App.controller (' Selfctrl ', function ($scope) {$scope. click = function () {$scope. $broadcast (' to-child ', ' child ' ); $scope. $emit (' to-parent ', ' parent '); }}); App.controller (' Parentctrl ', function ($scope) {$scope. $on (' To-parent ', function (event,data) {Console.log (' Parentctrl ', data); The parent can get the value}); $scope. $on (' To-child ', function (event,data) {console.log (' Parentctrl ', data); The child does not get the value}); App.controller (' Childctrl ', function ($scope) {$scope. $on (' To-child ', function (event,data) {console.log (' CHILDCT RL ', data); The child can get the value}); $scope. $on (' To-parent ', function (event,data) {console.log (' Childctrl ', data); Parent does not have a value}); App.controller (' Broctrl ', function ($scope) {$scope. $on (' To-parent ', function (event,data) {console.log (' Broc TRL ', data); The value of the peer}); $scope. $on (' To-child ', function (event,data) {console.log (' Broctrl ', data); The value of the peer}); });
Final result
Parentctrl Child
Childctrl Parent
$emit and $broadcast can pass multiple parameters, $on can also receive multiple parameters.
The event arguments in the $on method, the properties and methods of their objects are as follows
Event Properties |
Purpose |
Event.targetscope |
Emit or propagate the scope of the original event |
Event.currentscope |
The scope of the event currently being processed |
Event.name |
Event name |
Event.stoppropagation () |
A function to prevent further propagation (bubbling/trapping) of events (this applies only to events emitted using ' $emit ') |
Event.preventdefault () |
This method does not actually do anything, but will set ' defaultprevented ' to true. It does not check the value of ' defaultprevented ' until the event listener's implementation takes action. |
event.defaultprevented |
True if ' preventdefault ' is called |
Angularjs Learning-The use of $on, $emit and $broadcast