This article describes the communication method between controllers in AngularJS development tutorial. Share it for your reference, as follows:
1. Communication between instructions and controllers is nothing more than the following methods:
Based on scope inheritance
Based on event propagation
Service method (singleton mode)
2. Methods based on scope inheritance:
The easiest way to communicate between controllers is through scope inheritance. Suppose there are two controllers Parent and Child. Child is in Parent, then Child can be called the child controller of the controller Parent, which will inherit the scope of the parent controller Parent. In this way, Child can access all functions and variables in Parent's scope.
It should be noted that since scope inheritance is based on Js' prototype inheritance, if the variable is of a basic type, then modification (write) in Child may cause the data in Parent to become dirty.
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>based onscopeThe way of inheritance</title>
</head>
<body ng-app = "myApp">
<div ng-controller = "parent">
<p>Reference Type：{{}}</p>
<p>Reference Type：{{value}}</p>
<a href="javascript:;" ng-click = "parent('parent')">Click me</a>
<div ng-controller="child">
<p>Reference Type：{{}}</p>
<p>Reference Type：{{value}}</p>
<a href="javascript:;" ng-click = "child('child')">Click me</a>
</div>
</div>
<script type="text/javascript" src='//1.3.0-beta.13/'></script>
<script>
var app = ("myApp",[],function(){("start")});
("parent",function($scope){
$ = function(newchild){
// It cannot be written separately here as $={value:newchild} $={value:newchild};
$ = newchild;
}
});
("child",function($scope){
$ = function(newchild){
$ = newchild;
$=newchild;
}
});
</script>
</body>
</html>
3. 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, on, emit, and boardcast methods, among which boardcast methods are implemented, where on means event monitoring, emit means triggering events to scope above the parent, emit means triggering events to scope above the parent, and boardcast means broadcasting events to scope below the child.
Son to parent register event via $emit, example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Propagate the child to the parent based on events</title>
</head>
<body ng-app = "myApp">
<h3>$on,$emit,$boardcastThese methods to achieve，in$onIndicates event monitoring，$emitIndicates that it is above the parent level Scope trigger event， $boardcastIndicates broadcasting events to scopes below children</h3>
<div ng-controller = "parent">
<p>Reference Type：{{value}}</p>
<div ng-controller="child">
<a href="javascript:;" ng-click = "child('child')">The child passes the value to the parent</a>
</div>
</div>
<script type="text/javascript" src='//1.3.0-beta.13/'></script>
<script>
var app = ("myApp",[],function(){("start")});
("parent",function($scope){
$scope.$on("pfan",function(e,data){
$ = data;
})
});
("child",function($scope){
$ = function(newchild){
$ = newchild;
$scope.$emit("pfan",$)
}
});
</script>
</body>
</html>
The father to the son registers the event through $broadcast, but it actually feels a bit redundant. The father can share it with the son.,example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Propagation of parent to child based on events</title>
</head>
<body ng-app = "myApp">
<h3>$on,$emit,$boardcastThese methods to achieve，in$onIndicates event monitoring，$emitIndicates that it is above the parent level Scope trigger event， $boardcastIndicates broadcasting events to scopes below children</h3>
Propagation of parent to child based on events，Here, you can get to the son by being able to work as a father，Feeling a little redundant
<div ng-controller = "parent">
<a href="javascript:;" ng-click = "parent('child')">The child passes the value to the parent</a>
<div ng-controller="child">
<p>Reference Type：{{value}}</p>
</div>
</div>
<script type="text/javascript" src='//1.3.0-beta.13/'></script>
<script>
var app = ("myApp",[],function(){("start")});
("parent",function($scope){
$ = function(newchild){
$ = newchild;
$scope.$broadcast("pfan",$)
}
});
("child",function($scope){
$scope.$on("pfan",function(e,data){
$ = data;
})
});
</script>
</body>
</html>
Between the same level
Communication between children scopes with the same parent scope, that is, between brothers/adjacent scopes, is actually transmitted by means of the common parent:
Does anyone want to send messages in the child scope? Emit one to "dad" and then emit one to "dad" through "dad" and then send the same message to all children through "dad" broadcast. Of course, the one who sends the message can choose whether to ignore the information you send.
4. The method of angular service:
In ng, the service is a singleton, so an object is generated in the service, and the object can be shared in 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>
For more information about AngularJS, readers who are interested in view the topic of this site:AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary》
I hope this article will be helpful to everyone's AngularJS programming.