Detailed Explanation of Data Sharing and Communication between AngularJS Controllers

AngularJS itself already provides ways like directing Directive and serving Service 1 classes, To realize the sharing and reuse of data and code, but in the actual project development, we may be lazy, or for convenience, we always want to share and communicate data directly between two controllers, or call functions and methods. Here we will see what methods can meet this requirement.

Singleton service

Singleton service is a data and code sharing method supported by AngularJS itself, because it is singleton, 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 1 controller, call ObjectService.set('i', 1) Setting data, in other controllers, can be passed through ObjectService.get('i') To get.

Broadcasts and Events

In AngularJS, parameters can be passed when triggering events and sending broadcasts, and data sharing can be realized through this 1 feature. There are three methods related to events and broadcasts, namely:

1. $emit (): Triggers an event that can pass data up, for example, from a child controller to a parent controller, and from a controller to $rootScope

2. $broadcast (): Sends a broadcast that can pass data down, for example, from a parent controller to a child controller, or from $rootScope to any controller

3. $on (): Listens for events and broadcasts, capturing $emit and $broadcast

Communication between controllers can be divided into three situations:

1. No directly associated controller: Use $rootScope. $emit (), $rootScope. $boardcast (), or $scope. $emit to emit data, and use $rootScope. $on () to retrieve data

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

3. Child controller to parent controller: The child controller uses $scope. $emit () to send data, and the parent controller uses $scope. $on () to get data

The following 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 have the same parent controller, data sharing and communication can be carried out through the parent controller. For example:

<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){
 //  Variables used to pass data 
 $scope.data = null;
}

//  Sub-controller 
angular
 .module('app')
 .controller('ChildOneController', ['$scope', ChildOneController]);
function ChildOneController($scope){
 //  Data setting 
 $scope.$parent.data = 1;
}

//  Sub-controller 
angular
 .module('app')
 .controller('ChildTwoController', ['$scope', '$timeout', ChildTwoController]);
function ChildTwoController($scope, $timeout){
 $timeout(function(){
  //  Data reading 
  console.log($scope.$parent.data);
 }, 1000);
}

Global or shared variables

AngularJS provides the encapsulation of window and localStorage, $window and $localStorage. By modifying and listening to these two values, data sharing and communication between controllers can be achieved. The method is as follows:

// one controller
angular
 .module('app')
 .controller('OneController', ['$scope', '$window', OneController]);
function OneController($scope, $window){
 //  Data setting 
 $window.data = 1;
}

// other controller
angular
 .module('app')
 .controller('AnotherController', ['$scope', AnotherController]);
function AnotherController($scope){
 //  Monitor modifications 
 $scope.$watch(function(){
  return $window.data;
 }, function(n){
  $scope.windowData = n;
 });
}

In fact, this way of monitoring and modifying can also be used in other communication methods.

Element binding

In AngularJS, you can get the controller instance on one element. In this way, it can be quickly obtained
Modify data in a controller, or call methods in this controller. For example:

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

You can get a controller instance in the following ways:

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

This instance can then be used to invoke the controller's methods to get and modify values. Can not be the element itself has a controller bound, or the parent element of the element has a controller bound, can be successfully obtained.

This article on the Angular controller between the data sharing and communication introduced to this, angularjs sharing data related knowledge interested in friends can learn, thank you for supporting this site.