Preface
Each controller will have its own scope, and all scopes belong to the child of $rootScope or the child...
Then the problem will be solved easily,$rootScope.$broadcast Broadcast events Every controller can receive events
In addition, my experience is to try not to use event to transmit data. A service should be established to save data and set the corresponding getter/setter, as follows:
Each controller depends on the service,call (...)
Unified(...)After changing the data, you can$emit('data-updated')
In each controller$on('data-updated', function(){ $ = () })
If you use Angular, you can use the following four methods
1、event
There are two ways here, one is$scope.$emit, and then get the parameters through the $rootScope event; the other is$rootScope.$broadcast, get parameters through the $scope event.
These two methods have no performance differences in the latest version of Angular. The main reason is that the event sending directions are different, and you can choose according to the actual situation.
2、service
You can create a dedicated event service, or you can divide it according to business logic and store the data in the corresponding service, because someone has mentioned it, so I won't go into details.
3、$rootScope
This method may be more dirty, which is more convenient, that is, store the data in $rootScope, so that each child $scope can be called, but you need to pay attention to the life cycle
4. Directly use $scope.$nextSibling and similar properties
Something similar$scope.$parent. The disadvantages of this method are even more. The official does not recommend using any attributes starting with $, which not only increases coupling, but also requires handling asynchronous problems, and the order of scope is not fixed. Not recommended
In addition, parameters are passed through local storage, global variables or postMessage of modern browsers. Unless in special circumstances, please avoid this method.
Build a service directly, don't use any events. A large number of N and more controllers or N for a long time will kill you. The service provides storage and withdrawal methods. It is simple and clear. The API is easy to find and modify, and debugging is also convenient for dependencies without any confusion.
1. Use scope inheritance method
Since the inheritance of scope is based on the prototype inheritance method of js, there are two situations here. When the value on the scope is a basic type, modifying the value on the parent scope will affect the child scope. On the contrary, modifying the child scope will only affect the value of the child scope and will not affect the value on the parent scope; if the parent scope needs to share a value with the child scope, the latter type needs to be used, that is, the value on the scope is an object, and any modification of either party can affect the other party, because in js objects are reference types.
Basic Type
function Sandcrawler($scope) {
$ = "Mos Eisley North";
$ = function(newLocation) {
$ = newLocation;
}}function Droid($scope) {
$ = function(newLocation) {
$ = newLocation;
}}// html<div ng-controller="Sandcrawler">
<p>Location: {{location}}</p>
<button ng-click="move('Mos Eisley South')">Move</button>
<div ng-controller="Droid">
<p>Location: {{location}}</p>
<button ng-click="sell('Owen Farm')">Sell</button>
</div></div>Object
function Sandcrawler($scope) {
$ = {location:"Mos Eisley North"};}function Droid($scope) {
$ = function(newLocation) {
$ = newLocation;
}}// html<div ng-controller="Sandcrawler">
<p>Sandcrawler Location: {{location}}</p>
<div ng-controller="Droid">
<button ng-click="summon('Owen Farm')">
Summon Sandcrawler
</button>
</div></div>2. Event-based approach
In general, inheritance-based method is sufficient to satisfy most cases, but this method does not implement communication methods between sibling controllers, so the event method is introduced. In the event-based method, we can implement the $on, $emit, and $boardcast functions in it. Where $on represents an event, $emit represents an event triggering an event to the scope above the parent, and $boardcast represents broadcasting an event to the scope below the child. Refer to the following code:
Propagate events upwards
function Sandcrawler($scope) {
$ = "Mos Eisley North";
$scope.$on('summon', function(e, newLocation) {
$ = newLocation;
});}function Droid($scope) {
$ = "Owen Farm";
$ = function() {
$scope.$emit('summon', $);
}}// html<div ng-controller="Sandcrawler">
<p>Sandcrawler Location: {{location}}</p>
<div ng-controller="Droid">
<p>Droid Location: {{location}}</p>
<button ng-click="summon()">Summon Sandcrawler</button>
</div></div>Broadcast events downward
function Sandcrawler($scope) {
$ = "Mos Eisley North";
$ = function() {
$scope.$broadcast('recall', $);
}}function Droid($scope) {
$ = "Owen Farm";
$scope.$on('recall', function(e, newLocation) {
$ = newLocation;
});}//html<div ng-controller="Sandcrawler">
<p>Sandcrawler Location: {{location}}</p>
<button ng-click="recall()">Recall Droids</button>
<div ng-controller="Droid">
<p>Droid Location: {{location}}</p>
</div>
</div>From this usage, we can extend a method for communication between brother controls. First, in one of our brother controls, we trigger an event to the parent scope, and then broadcast the event to the child scope. In this way, through the parameters carried by the event, the data is transmitted through the parent scope and between brother scopes. It should be noted here that if the parent element is passed as an intermediary, the event names used by the brother element cannot be the same, otherwise it will enter a dead loop.
Please see the code:
Spread between brotherly scopes
function Sandcrawler($scope) {
$scope.$on('requestDroidRecall', function(e) {
$scope.$broadcast('executeDroidRecall');
});}function Droid($scope) {
$ = "Owen Farm";
$ = function() {
$scope.$emit('requestDroidRecall');
}
$scope.$on('executeDroidRecall', function() {
$ = "Sandcrawler"
});}// html<div ng-controller="Sandcrawler">
<div ng-controller="Droid">
<h2>R2-D2</h2>
<p>Droid Location: {{location}}</p>
<button ng-click="recallAddDroids()">Recall All Droids</button>
</div>
<div ng-controller="Droid">
<h2>C-3PO</h2>
<p>Droid Location: {{status}}</p>
<button ng-click="recallAddDroids()">Recall All Droids</button>
</div></div>3. The way of angular service
In ng, the service is a singleton, so an object is generated in the service, and the object can be shared on all controllers using dependency injection. Referring to the following example, one controller modifies the value of the service object and obtains the modified value in another controller:
var app = ('myApp', []);
('instance', function(){
return {};});
('MainCtrl', function($scope, instance) {
$ = function() {
= $;
};});
('sideCtrl', function($scope, instance) {
$ = function() {
$ = ;
};});//html<div ng-controller="MainCtrl">
<input type="text" ng-model="test" />
<div ng-click="change()">click me</div>
</div><div ng-controller="sideCtrl">
<div ng-click="add()">my name {{name}}</div></div>Summarize
The above is the entire content of this article. I hope that the content of this article will be of some help to everyone’s learning or use. If you have any questions, you can leave a message to communicate. Thank you for your support.