Angularjs the communication mode between the controller _angularjs

This article illustrates the way of communication between ANGULARJS controllers. Share to everyone for your reference, specific as follows:

First, the use of the scope of the inheritance method

Because the inheritance of the scope is based on JS prototype inheritance method, so there are two situations where, when the value above the scope is the base type, modifying the value above the parent scope affects the child scope, whereas modifying the child scope only affects the value of the child scope and does not affect the value above the parent scope If you want a parent scope to share a value with a child scope, you need to use one of the following, that is, the value on the scope is an object, and any modification to the other side can affect the other, because in JS the object is a 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
  " 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>

Ii. Event-based approaches

In general, inheritance based methods are sufficient to satisfy most situations, but this approach does not implement the communication between sibling controllers, so it leads to the way the event is done. In the event-based way we can function within the $on, $emit, $boardcast these several ways to implement, where $on represents event listening, $emit represents triggering events above the parent, $boardcast represents a scope broadcast event below the child level. Refer to the following code:

Propagate events up

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 events down

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 develop a method for communication between brother controls, first of all, we're a brother. The control triggers an event to the parent scope, listens to the event in the parent scope, and broadcasts it to the child scope, so that the parameters carried by the event enable the data to pass through the parent scope and propagate between the sibling scopes. It should be noted here that, through the parent element as an intermediary to pass, the sibling element of the event name can not be the same, otherwise it will enter the dead loop. Please look at the code:

Brother Scopes spread between

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" >
     
 

Third, the way of angular service

In Ng, a service is a single case, so an object is generated in the service that can be shared across all controllers in a way that relies on injection. Refer to the following example to modify the value of a service object in one controller and obtain 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>

I hope this article will help you to Angularjs program design.