Detailed explanation of communication methods between AngularJS controllers

The examples in this article describe the communication methods between AngularJS controllers. Share it with everyone for your reference, the details are as follows:

1. Use the inheritance method of scope

Since the inheritance of scope is based on the prototype inheritance method of js, there are two situations here. When the value above the scope is For basic types, modifying the value on the parent scope will affect the child scope. On the contrary, modifying the child scope will only affect the value on the child scope and will not affect the value on the parent scope; if you need the parent scope and If subscopes share a value, you need to use the latter one, that is, the value on the scope is an object. Modifications on either side can affect the other side. This is because objects in js are reference types.

Basic types

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：

<p ng-controller="Sandcrawler">
  <p>Location: {{location}}</p>
  <button ng-click="move(&#39;Mos Eisley South&#39;)">Move</button>
  <p ng-controller="Droid">
    <p>Location: {{location}}</p>
    <button ng-click="sell(&#39;Owen Farm&#39;)">Sell</button>
  </p>
</p>

Object

function Sandcrawler($scope) {
  $scope.obj = {location:"Mos Eisley North"};
}
function Droid($scope) {
  $scope.summon = function(newLocation) {
    $scope.obj.location = newLocation;
  }
}

html： reee

2. Event-based approach

in In general, the inheritance-based method is sufficient for most situations, but this method does not implement communication between sibling controllers, so the event method is introduced. In the event-based approach, we can implement it in the following ways: $on, $emit, and $boardcast. $on represents event monitoring, $emit represents triggering events to the scope above the parent, and $boardcast represents reporting to the child. Broadcast events to scopes below the level. Refer to the following code:

Broadcast events up

<p ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <p ng-controller="Droid">
    <button ng-click="summon(&#39;Owen Farm&#39;)">
      Summon Sandcrawler
    </button>
  </p>
</p>

html:

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);
  }
}

Broadcast events down

<p ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <p ng-controller="Droid">
    <p>Droid Location: {{location}}</p>
    <button ng-click="summon()">Summon Sandcrawler</button>
  </p>
</p>

html：

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;
  });
}

from From this usage, we can derive a method for communication between sibling controls. First, we trigger an event to the parent scope in a sibling control, then listen for the event in the parent scope, and then broadcast it to the child scope. In this way, The parameters carried by the event realize the propagation of data between sibling scopes through the parent scope. What should be noted here is that if the event is passed through the parent element as an intermediary, the event names used by the sibling elements cannot be the same, otherwise it will enter an infinite loop. Please look at the code:

Propagation between sibling scopes

<p ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <button ng-click="recall()">Recall Droids</button>
  <p ng-controller="Droid">
    <p>Droid Location: {{location}}</p>
  </p>
</p>

html：

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"
  });
}

Three, the way of angular service

In ng, the service is a singleton, so in the service Generate an object in it, which can be shared among all controllers using dependency injection. Refer to the following example, the value of the service object is modified in one controller and the modified value is obtained in another controller:

<p ng-controller="Sandcrawler">
  <p ng-controller="Droid">
    <h2>R2-D2</h2>
    <p>Droid Location: {{location}}</p>
    <button ng-click="recallAddDroids()">Recall All Droids</button>
  </p>
  <p ng-controller="Droid">
    <h2>C-3PO</h2>
    <p>Droid Location: {{status}}</p>
    <button ng-click="recallAddDroids()">Recall All Droids</button>
  </p>
</p>

html:

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;
  };
});

The above is the AngularJS control For a detailed explanation of the communication methods between servers, please pay attention to the PHP Chinese website (www.php.cn) for more related content!