Home > Developer > JavaScript
Explanation of how to use $ broadcast and $ emit in Angular, angularemit
To pass variable changes between controllers, you need to use the $ broadcast and $ emit methods in angular to pass them, and use $ on to receive events and respond.
Broadcast is translated into broadcast, that is, the upper-level transmission sub-level.
Sample Code:
<script src="../angular.js"></script><script>angular.module("app", []) .controller("child", function($scope) { $scope.$on("parentChange", function(e, m) { $scope.change = "changed"; $scope.child = m; }) }) .controller("parent", function($scope) { $scope.$watch("parent", function(n, o) { if (n == o) { return; } $scope.$broadcast("parentChange", n) }) })</script><body> <div ng-controller="parent"> Parent: {{parent}} <input type="text" ng-model="parent"> <div ng-controller="child"> {{change}} Child: {{child}} </div> </div></body>
The above Code uses $ watch to listen for changes in the value of the parent. When a change occurs, the parentChange event will be broadcast and a parameter (Value in the input box) will be passed ), $ scope is used in the sub-element scope. $ on ("parentChange, handler)" to receive the parentChange event, then accept the value of the input box, and assign the value to the child variable in the subscope. In this way, the value is passed.
Effect:
In other words, the lower-level transmission is superior.
Sample Code:
<script src="../angular.js"></script><script>angular.module("app", []) .controller("parent", function($scope) { $scope.$on("childChange", function(e, m) { $scope.change = "changed"; $scope.parent = m }) }) .controller("child", function($scope) { $scope.$watch("child", function(n, o) { if (n == o) { return; } $scope.$emit("childChange", n) }) })</script><body ng-controller="parent"> {{change}} Parent: {{parent}} <div ng-controller="child"> Child: {{child}} <input type="text" ng-model="child"> </div></body>
When the child value of the child element changes, the childChange event is sent to the parent, and the $ on ("childChange") that the parent element is listening to will respond, assign the passed parameter to the parent. The whole process is similar to that of broadcast.
Effect:
The preceding scopes all have hierarchical relationships. What should we do for the scopes of the same level?
We can use the service to broadcast events:
<script src="../angular.js"></script><script>angular.module("app", []) .service("myServive", function($rootScope) { return { change: function(n) { $rootScope.$broadcast("valueChange", n); } } }) .controller("bro1", function($scope, myServive) { $scope.$watch("value1", function(n) { myServive.change(n); }) $scope.$on("valueChange", function(e, m) { console.log("value1"); $scope.value1 = m; }) }) .controller("bro2", function($scope, myServive) { $scope.$watch("value2", function(n) { myServive.change(n); }) $scope.$on("valueChange", function(e, m) { console.log("value2"); $scope.value2 = m; }) })</script><body> <div ng-controller="bro1">
We use $ rootScope in the service, and all scopes belong to it. Based on this, we can broadcast events in the root scope, $ rootScope. $ broadcast ("valueChange", n); when the value in each subscope changes, we call the change method in the service to broadcast this event, at the same time, each scope is listening for the $ on ("valueChange") event and processing it accordingly, so that the value in the subscope will be passed to the sibling scope.
Effect:
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
