How do I communicate between scopes?
1. Create a singleton service, and then use this service to handle all child-scoped traffic.
2. Handle communication 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: Sub-parent passes event and data
$broadcast: Parent child controller passes event and data
$on: Listen or receive data. For receiving event and data
$broadcast, $emit events must be triggered by other events (Ng-click, and so on), rather than simply writing one of these.
$on can write directly, because it belongs to listening and receiving data.
Event arguments in the $on method:
Event.name Event Name
Event.targetscope to emit or propagate the scope of the original event
Event.currentscope the scope of the event that is currently being processed
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
<style>div{border:1px solid #ff7300;p Adding:20px;margin:10px;border-radius:5px;}</style><div ng-controller="Parentcontroller"><!--Parent-to <div ng-click="ClkP ()">click--to child</div> <div ng-controller="Oneselfcontroller"><!--Yourself--<span ng-click="Clkme ()">click me</span> <div ng-controller="Childcontroller">It's a child of Oneselfcontroller.</div><!--Children-</div> <div ng-controller="Siblingscontroller">It's a lateral oneselfcontroller .</div><!--Lateral--></div><script>varApp=angular.module ('Firstapp',[]);//App Module nameApp.controller ('Oneselfcontroller', Function ($scope) {$scope. Clkme=function () {$scope. $broadcast ('Sendchild','I'm passing data to the child controller .'); $scope. $emit ('sendparent','bubbles to Parent element')}). Controller ('Parentcontroller', Function ($scope) {$scope. $on ('sendparent', Function (Event, data) {//listening for sendparent events defined in the child controllerConsole.log ('Oneselfcontroller sent it over.', data,Event. Name,Event);//Event Name: Sendparent }); $scope. ClkP=function () {$scope. $broadcast ('Sendallchild','let the Siblingscontroller receive'); }}). controller ('Childcontroller', Function ($scope) {$scope. $on ('Sendchild', Function (Event, data) {//listening for sendchild events defined in the child controllerConsole.log ('Childctrl', data,Event. Name,Event);//Event Name: Sendchild }); }). controller ('Siblingscontroller', Function ($scope) {$scope. $on ('Sendallchild', Function (Event, data) {Console.log ('it's worth it.', data); }); //The following event does not trigger$scope. $on ('sendparent', Function (Event, data) {Console.log ('no value on the same lateral.', data); }); $scope. $on ('Sendchild', Function (Event, data) {Console.log ('no value on the same lateral.', data); }); });</script>
Original address: http://www.cnblogs.com/yuzhongwusan/p/4938816.html
Angularjs's $on, $emit, $broadcast