Communication between angular Controllers

Communication between controllers utilizes the inheritance of scopes

Because the inheritance of scopes is based on the JS prototype inheritance method, there are two cases. When the value above the scope is of the basic type, modifying the value above the parent scope will
Affects the sub-Scope. Otherwise, modifying the sub-scope will only affect the value of the sub-scope and will not affect the value above the parent scope. If you need to share a value between the parent scope and the sub-scope
In this case, you need to use the next one, that is, the value in the scope is the object. Any modification by either party can affect the other, because in JS, the object is of reference type.

Basic Type

function Sandcrawler($scope) {    $scope.location = "Mos Eisley North";    $scope.move = function(newLocation) {        $scope.location = newLocation;    }}function Droid($scope) {    $scope.sell = function(newLocation) {        $scope.location = 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) {    $scope.obj = {location:"Mos Eisley North"};}function Droid($scope) {    $scope.summon = function(newLocation) {        $scope.obj.location = 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>

Event-based approach

In general, the inheritance-based method is sufficient for most cases, but this method does not implement the communication mode between brother controllers, so the event mode is introduced.
. In the event-based approach, we can implement the $ on, $ emit, and $ boardcast modes, where $ on indicates event listening, and $ emit indicates to the parent level or above.
Event triggered by scope, $ boardcast indicates to broadcast events to the scope below the child level. Refer to the following code:

Event Propagation

function Sandcrawler($scope) {    $scope.location = "Mos Eisley North";    $scope.$on(‘summon‘, function(e, newLocation) {        $scope.location = newLocation;    });}function Droid($scope) {    $scope.location = "Owen Farm";    $scope.summon = function() {        $scope.$emit(‘summon‘, $scope.location);    }}// 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 down events

function Sandcrawler($scope) {    $scope.location = "Mos Eisley North";    $scope.recall = function() {        $scope.$broadcast(‘recall‘, $scope.location);    }}function Droid($scope) {    $scope.location = "Owen Farm";    $scope.$on(‘recall‘, function(e, newLocation) {        $scope.location = 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 sibling controls. First, we trigger an event to the parent scope in a sibling control, and then in the parent Scope
Listen to the event, and then broadcast it to the sub-Scope. Through the parameters carried by the event, the data passes through the parent scope and is transmitted between the sibling scopes. It should be noted that, if the parent element is transmitted as an intermediary, the event names of the sibling element cannot be the same, otherwise it will enter an endless loop. See the Code:

-Spread between sibling scopes

function Sandcrawler($scope) {    $scope.$on(‘requestDroidRecall‘, function(e) {        $scope.$broadcast(‘executeDroidRecall‘);    });}function Droid($scope) {    $scope.location = "Owen Farm";    $scope.recallAllDroids = function() {        $scope.$emit(‘requestDroidRecall‘);    }    $scope.$on(‘executeDroidRecall‘, function() {         $scope.location = "Sandcrawler"    });}// html<div ng-controller="Sandcrawler">    <div ng-controller="Droid">         
Angular service method
In Ng, the service is a singleton. Therefore, if an object is generated in the service, the object can be shared among all controllers by means of dependency injection. The following example shows how to modify the service object value in one controller and get the modified value in another controller:
 
var app = angular.module(‘myApp‘, []);app.factory(‘instance‘, function(){    return {};});app.controller(‘MainCtrl‘, function($scope, instance) {  $scope.change = function() {       instance.name = $scope.test;  };});app.controller(‘sideCtrl‘, function($scope, instance) {    $scope.add = function() {        $scope.name = instance.name;    };});//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>
 
 


Communication between angular Controllers