Data sharing and communication between ANGULARJS controllers _ANGULARJS

Source: Internet
Author: User
Tags emit


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.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.