In Angularjs, you can use the event broadcast mechanisms of $broadcast, $emit, $on to communicate between different scopes.
introduce:
The purpose of $broadcast is to propagate events from the parent scope to the child scope, including itself. The format is as follows: $broadcast(eventName,args)
The purpose of $emit is to propagate events from the child scope to the parent scope, including itself until the root scope. The format is as follows: $emit(eventName,args)
$on is used to monitor events propagated from children or parent scopes and corresponding data in scope. The format is as follows: $on(event,data)
In the above description, eventName is the name of the event that needs to be monitored, the parameter event in the $on method is the relevant object of the event, and data is the data propagated by the event.
The event parameter in the $on method has the following properties and methods
Event attributes/method functional description
| Event properties/methods | Functional description |
|---|---|
| event.targetScope | Get the scope of the propagation event |
| event.currentScope | Get the scope of the received event |
| event.name | The name of the spread event |
| event.stopPropagation() | Prevent events from bubble propagation, only valid in $emit events |
| event.preventDefault() | Prevent propagation events from happening |
| event.defaultPrevented | Return true if preventDefault event is called |
Code:
<!DOCTYPE html><html ng-app="myApp"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="ajjs/angularjs.js"></script> <script> var myApp = angular.module("myApp", []); //Controller Self myApp.controller("Self", function ($scope,$window) { //Button's propagation event $scope.toParent = function () { //Register an event that is propagated upwards, eventName:'FromSelf', data:oneObject $scope.$emit("FromSelf", { divName: "Self", description: "Propagate data to the parent" }); }; $scope.toChild = function () { //Register an event that is propagated downwards, eventName:'FromSelf', data:oneObject $scope.$broadcast("FromSelf", { divName: "Self", description: "Propagate data to the child" }); }; $scope.name = "Self"; $scope.$on("FromChild", function (event, data) { $window.alert("Current node" + event.currentScope.name + "Intercepted events from " + data.divName + ": " + event.name + ", its function is " + data.description); }); }); //Controller Parent myApp.controller("Parent", function ($scope, $window) { $scope.name = "Parent"; //$on is used for events $scope.$on("FromSelf", function (event, data) { $window.alert("Current node" + event.currentScope.name + ",intercepted events from " + data.divName + ": " + event.name + ", its function is " + data.description); }); $scope.$on("FromChild", function (event, data) { $window.alert("Current node" + event.currentScope.name + ",intercepted events from " + data.divName + ": " + event.name + ",its " + data.description); }); }); //Controller Child myApp.controller("Child", function ($scope, $window) { $scope.name = "Child"; //$on is used to intercept events from parent scope $scope.$on("FromSelf", function (event, data) { $window.alert("Current node" + event.currentScope.name +"Intercepted events from " + data.divName + ": " + event.name + ", its function is " + data.description); }); //Button's propagation event $scope.toTop = function () { //Register an event that propagates upwards, eventName:'FromChild', data:oneObject $scope.$emit("FromChild", { divName: "Child", description: "Upload data" }); }; }); </script></head><body> <form name="test"> <div ng-controller="Parent"> Here is the parent Div <div ng-controller="Self"> Here is the child SelfDiv <input type="button" ng-click="toParent()" value="Propagate event to ParentDiv" /> <input type="button" ng-click="toChild()" value="Propagate event to ChildDiv" /> <div ng-controller="Child"> Here is the child ChildDiv <input type="button" ng-click="toTop()" value="upload event" /> </div> </div> <div ng-controller="Borther"> Here is Self's brother BortherDiv </div> </div> </form></body> </html>Code
Effect:
Other properties:The above event broadcast in Angularjs - a comprehensive analysis of $broadcast, $emit, $on is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.