Home>

This article details the data sharing and communication between angularjs controllers,Friends interested in angularjs sharing data and communication knowledge can learn together.

angularjs itself already provides methods like directive and service,To share and reuse data and code,But in actual project development,Maybe being lazy,Or for convenience,Always want to be between two controllers,Share data directly,Or calls to 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 a controller,Callobjectservice.set ("i", 1) set data,In other controllers,You can useobjectservice.get ("i") to get.

Broadcast and events

When firing events and sending broadcasts in angularjs,Can pass parameters,Can pass this feature,To achieve data sharing.Related to events and broadcasts,There are three methods,They are:

1. $emit ():triggers an event,It can pass data up,For example, the child controller goes to the parent controller,And the controller sends the$rootscope

2. $broadcast ():Send the broadcast,It can pass data down,For example, the parent controller passes data to the child controller,Or$rootscopePass data to any controller

3. $on ():Listen to events and broadcasts.Can capture$emitand$broadcast

Can communicate between controllers,There are three scenarios:

1. Controller without direct association:Use$rootscope. $emit (), $rootscope. $boardcast ()or$scope. $emitto send data,Get data through $rootscope. $On ()

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

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

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 can be shared and communicated through the parent controller.such as:

<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;
}
//child controller
angular
 .module ("app")
 .controller ("childonecontroller", ["$scope", childonecontroller]);
function childonecontroller ($scope) {
 //data setting
 $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 support forwindowandlocalstorageEncapsulation of two variables,$windowand$localstorageBy modifying and listening to these two values,Can achieve the purpose of data sharing and communication between controllers.Methods as below:

//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) {
 //Listen for changes
 $scope. $watch (function () {
  return $window.data;
 }, function (n) {
  $scope.windowdata=n;
 });
}

Actually, this way of monitoring changes,Can also be used in other communication methods.

Element binding

In angularjs, you can pass an element,To get the controller instance on it.This way you can quickly get

Modify the data in a controller,Or call a method in this controller.such as:

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

You can do this byTo get the controller instance:

var instance=angular.element (document.getelementbyid ("div-a")). scope ();

You can then use thisinstanceto call the controller's method,Get and modify values ​​too.It cannot be that the element itself is bound to a controller,Or the element's parent element is bound to a controller,Can be successfully obtained.

  • Previous Android (Android) chat robot to achieve code sharing
  • Next How does JSP get client real IP address