Data sharing and communication between ANGULARJS controllers _ANGULARJS

Angularjs itself has provided a way to share and reuse data and code, such as instruction Directive and service services, but in actual project development, perhaps lazy, or, for convenience, always want to share data directly between two controllers, or the invocation of functions and methods, let's see what we can do to meet this requirement.

Single Case Service

The single example service is the data and code sharing method that the Angularjs itself supports, because it is a single case and all controllers access the same data. For example, the following Service can be implemented:

Angular
 . Module (' app ')
 . Service (' Objectservice ', [Objectservice]);
function Objectservice () {
 var list = {};
 return {
  get:function (ID) {return
   list[id];
  },
  set:function (ID, v) {
   List[id] = v;
  }
 ;
}

In a controller, theObjectService.set('i', 1)data that is set is invoked, and can be obtained by the other controllerObjectService.get('i').

Broadcasts and events

In Angularjs, when triggering events and sending broadcasts, parameters can be passed, which enables the sharing of data. For event and broadcast related, there are three methods, respectively:

1. $emit (): triggers the event, it can pass data up, for example, the child controller to the parent controller, and the controller to $rootScope

2. $broadcast (): sends a broadcast, it can pass data down, for example, the parent controller passes data to the child controller, or $rootScope passes data to any controller

3. $on (): monitoring events and broadcasts, can capture $emit and $broadcast

You can divide the communication between controllers into three different situations:

1. Controller without direct correlation: use $rootScope. $emit (), $rootScope. $boardcast () or $scope. $emit to send the data through $ Rootscope. $on () to get the data

2. Parent controller to Child controller: The parent controller uses $scope. $boradcast () to send data, and the child controller obtains data by $scope. $on ()

3. Sub Controller to Parent controller: the child controller uses $scope. $emit () to send data, and the parent controller obtains data by $scope. $on ()

Here is a simple usage:

One controller
angular
 . Module (' app ')
 . Controller (' Onecontroller ', [' $scope ', Onecontroller]);
function Onecontroller ($scope) {
 var data = {value: ' Test '};
 $rootScope. $broadcast (' open.notice.editor ', data);
}

Other controller
angular
 . Module (' app ')
 . Controller (' Anothercontroller ', [' $scope ', Anothercontroller]);
function Anothercontroller ($scope) {
 $scope. $on (' Open.notice.editor ', function (event, data) {
  $scope. Open (data);
  $scope. $emit (' notice.editor.opened ');}
 );

Parent Controller

If two controllers share the same parent controller, data sharing and communication can be done through the parent controller. Like what:

<div ng-controller= "Parentcontroller" >
 <div ng-controller= "Childonecontroller" ></div>
 <div ng-controller= "Childtwocontroller" ></div>
</div>

Parent controller
Angular
 . Module (' app ')
 . Controller (' Parentcontroller ', [' $scope ', Parentcontroller]);
function Parentcontroller ($scope) {
 //variable used to pass data
 $scope. data = null;
}

Child controller
Angular
 . Module (' app ')
 . Controller (' Childonecontroller ', [' $scope ', Childonecontroller]);
function Childonecontroller ($scope) {
 //Data Settings
 $scope. $parent. data = 1;
}

Child controller
Angular
 . Module (' app ')
 . Controller (' Childtwocontroller ', [' $scope ', ' $timeout ', Childtwocontroller]);
function Childtwocontroller ($scope, $timeout) {
 $timeout (function () {
  //Data read
  Console.log ($scope. $ parent.data);
 }, 1000);

Global or shared variables

ANGULARJS provides encapsulation of Windows and localstorage two variables,$window and $localStorage , By modifying and listening to these two values, you can achieve the purpose of data sharing and communication between controllers. The method is as follows:

One controller
angular
 . Module (' app ')
 . Controller (' Onecontroller ', [' $scope ', ' $window ', Onecontroller]);
function Onecontroller ($scope, $window) {
 //Data Settings
 $window. data = 1;
}

Other controller
angular
 . Module (' app ')
 . Controller (' Anothercontroller ', [' $scope ', Anothercontroller]);
function Anothercontroller ($scope) {
 //listening for modification
 $scope. $watch (function () {return
  $window. Data
 }, function (n) {
  $scope. windowdata = n;
 });

In fact, this kind of monitoring and modification of the way, can also be used in other modes of communication.

Element binding

In Angularjs, you can get the controller instance on it through an element. In this way, we can quickly get
Modify the data in a controller, or call the method in the controller. Like what:

<div ng-controller= "AppController" >
 <div id= "div-a" ></div>
</div>

You can get the controller instance in the following ways:

var instance = angular.element (document.getElementById (' div-a ')). scope ();

Then, you can invoke the Controller's method through this instance to get and modify the value. Whether the element itself is bound to a controller, or whether the element's parent element is bound to a controller, can be successfully acquired.

This article about the angular controller of data sharing and communication is introduced here, ANGULARJS share data related knowledge of interested friends can learn together, thank you for supporting the cloud habitat community.