Detailed explanation of data sharing and communication between AngularJS controllers

AngularJS itself has provided methods such as directive and service service to realize the sharing and reuse of data and code. However, in actual project development, perhaps it is lazy or for convenience, it is always wanted to directly communicate data sharing between two controllers, or call functions and methods. Here we will see which methods can meet this requirement.

Singleton Service

Singleton service is a data and code sharing method supported by AngularJS itself. Because it is a singleton, all controllers access the same piece of 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, call('i', 1) The data set can be passed in other controllers('i') Come to get it.

Broadcasting and Events

In AngularJS, parameters can be passed when triggering events and sending broadcasts. This feature can be used to realize data sharing. There are three methods related to events and broadcasts, namely:

    1.$emit()：Trigger event, it can pass data upwards, for example, the child controller to the parent controller, and the controller to the$rootScope

    2.$broadcast()：Send a broadcast, which can pass data down, for example, the parent controller passes data to the child controller, or $rootScope Passing data to any controller

    3.$on()：Listen to events and broadcasts, can be captured$emit and $broadcast

Communication between controllers can be divided into three situations:

    1. No direct correlation controller:use$rootScope.$emit()、$rootScope.$boardcast() or $scope.$emit to send data, and get data through $rootScope.$on()

    2. Parent controller to child controller:Parent controller use $scope.$boradcast() to send data, the subcontroller passes $scope.$on() To get data

   3. Child controller to parent controller:Subcontroller usage$scope.$emit() to send data, the parent controller passes $scope.$on() To get data

Here are the simple usages:

// one controller
angular
 .module('app')
 .controller('OneController', ['$scope', OneController]);
function OneController($scope){
 var data = {value: 'test'};
 $rootScope.$broadcast('', data);
}

// other controller
angular
 .module('app')
 .controller('AnotherController', ['$scope', AnotherController]);
function AnotherController($scope){
 $scope.$on('', function(event, data){
  $(data);
  $scope.$emit('');
 });
}

Parent controller

If both controllers share the same parent controller together, data sharing and communication can be performed through the parent controller. for example:

<div ng-controller="ParentController">
 <div ng-controller="ChildOneController"></div>
 <div ng-controller="ChildTwoController"></div>
</div>

// Parent controllerangular
 .module('app')
 .controller('ParentController', ['$scope', ParentController]);
function ParentController($scope){
 // Variables used to pass data $ = null;
}

// Subcontrollerangular
 .module('app')
 .controller('ChildOneController', ['$scope', ChildOneController]);
function ChildOneController($scope){
 // Data settings $scope.$ = 1;
}

// Subcontrollerangular
 .module('app')
 .controller('ChildTwoController', ['$scope', '$timeout', ChildTwoController]);
function ChildTwoController($scope, $timeout){
 $timeout(function(){
  // Data reading  ($scope.$);
 }, 1000);
}

Global or shared variables

AngularJS provides the rightwindow andlocalStorage Encapsulation of two variables,$window and $localStorage , by modifying and listening to these two values, the purpose of 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 settings $ = 1;
}

// other controller
angular
 .module('app')
 .controller('AnotherController', ['$scope', AnotherController]);
function AnotherController($scope){
 // Listen to modify $scope.$watch(function(){
  return $;
 }, function(n){
  $ = n;
 });
}

In fact, this monitoring and modification method can also be used in other communication methods.

Element binding

In AngularJS, you can obtain the controller instance on it through an element. This way you can quickly obtain
Modify the data in a controller, or call the methods in this controller. for example:

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

You can obtain the controller instance through the following methods:

var instance = (('div-a')).scope();

Then, you can pass thisinstance To call the controller's method, get and modify the value. It cannot be possible to obtain successfully whether the element itself is bound to have a controller or the element's parent element is bound to have a controller.

This is all about data sharing and communication between Angular controllers. Friends who are interested in the knowledge of sharing data in angularjs can learn together. Thank you for supporting me.