The direction of event routing is from the child scope to the parent scope, while the direction of the time broadcast is from the direction of the parent scope to the direction of the child scope. Just the opposite. Event routing, event broadcasting, note that the subject is the event. That is, events can flow from child scope to parent scope and from parent scope to child scope.
<html ng-app = "appModule">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
</head>
<body>
<div ng-controller="parentController">
<div ng-controller="childController">
<button ng-click="postEvent()">emit</button>
</div>
</div>
<div ng-repeat="person in people">
<input type="text" ng-model="person.age"/>{{person.age}}
</div>
</body>
<script type="text/javascript">
var appModule = angular.module('appModule', []);
appModule.controller('parentController', function($scope) {
/*The parent scope listens to the child scope, through the $on method*/
/* Note that the event methods of the parent scope and child scope are the same as initInfo*/
$scope.$on("initInfo", function(event, data) {
console.log("Received information from child scope");
console.log(data);
});
});
appModule.controller('childController', function($scope) {
/* The child scope sends the event to the parent scope through the $emit method */
$scope.postEvent = function() {
$scope.$emit("initInfo", {name:'jane', age:24});
}
});
</script>
</html>
<html ng-app = "appModule">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
</head>
<body>
<div ng-controller="parentController">
<span>parent scope</span><br>
<button ng-click="postEvent()">emit</button>
<div ng-controller="childController1">
<span>Subscope 1</span><br>
</div>
<div ng-controller="childController2">
<span>Subscope 2</span><br>
</div>
</div>
</body>s
<script type="text/javascript">
var appModule = angular.module('appModule', []);
appModule.controller('parentController', function($scope) {
$scope.postEvent = function() {
/*The parent scope wants to broadcast an event initInfo*/
$scope.$broadcast('initInfo', {name:'wuhan', age:23});
}
});
appModule.controller('childController1', function($scope) {
/*The child scope should listen for an event initInfo*/
$scope.$on("initInfo", function(event, data) {
console.log("childController1");
console.log(data);
});
});
appModule.controller('childController2', function($scope) {
/*The child scope should listen for an event initInfo*/
$scope.$on("initInfo", function(event, data) {
console.log("childController2");
console.log(data);
});
});
</script>
</html>