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 because of being lazy or for convenience, you will always want 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 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 one controller, the data set by ObjectService.set('i', 1) can be obtained through ObjectService.get('i') in other controllers.
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 passes data to any controller
3.$on(): Listen to events and broadcasts, and can capture $emit and $broadcast
Communication between controllers can be divided into three situations:
1. No direct association controller: use $rootScope.$emit(), $rootScope.$boardcast() or $scope.$emit to emit data, and obtain data through $rootScope.$on()
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 obtains data through $scope.$on()
Here are the simple usages:
// one controllerrangular .module('app') .controller('OneController', ['$scope', OneController]);function OneController($scope){ var data = {value: 'test'}; $rootScope.$broadcast('open.Notice.editor', data);}// other controllerrangular .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 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 controller angular .module('app') .controller('ParentController', ['$scope', ParentController]);function ParentController($scope){ // Variable for passing data $scope.data = null;}// ChildController angular .module('app') .controller('ChildOneController', ['$scope', ChildOneController]);function ChildOneController($scope){ // Data setting $scope.$parent.data = 1;}// ChildController 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 two variables, $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 controllerrangular .module('app') .controller('OneController', ['$scope', '$window', OneController]);function OneController($scope, $window){ // Data setting $window.data = 1;}// other controllerrangular .module('app') .controller('AnotherController', ['$scope', AnotherController]);function AnotherController($scope){ // Listen to modify $scope.$watch(function(){ return $window.data; }, function(n){ $scope.windowData = 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 id="div-a"></div></div>
You can obtain the controller instance through the following methods:
var instance = angular.element(document.getElementById('div-a')).scope();Then, you can use this instance to call the controller's method to obtain 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 your support to Wulin.com.