Communicate with controllers in angular js

There are many ways to communicate with different controllers .Some of them are

1. Share data between controllers by making function as Global
2. Share data between controllers using factory file
3. Using $emit or $broadcast
4. Using Watch Concept.

1. Share data between controllers by making function as Global

---

We have one ng-click function in controller1 .Onclick of this we have to share a data to controller 2 and invoke another function.

Controller 1

 
 
angular.module('sampleproject').controller( 'Controller1',
function ($rootScope, $scope )
{
  $scope.shareData = function( data ){
  
  $scope.sampleFunction( data) ;
   
  };
}); 
 

Controller 2

 
 
angular.module('sampleproject').controller( 'Controller2',
function ($rootScope, $scope )
{
  $rootScope.sampleFunction = function( data ){
  
  console.log(data);
  // your logic
   
  };
}); 
 

Here we are making function as global using $rootScop .We can access this function anywhere in the module.

2. Share data between controllers using factory file .

---

The most common and recommended method for sharing data between controllers is to use a service. Make a factory file common for controllers .

View

<div ng-app="sampleApp">
    
 <div ng-controller="Ctrl1">Controller 1: {{foo}}</div>
    
 <div ng-controller="Ctrl2">Controller 2: {{foo}}</div>

</div>

Factory File

var app = angular.module('sampleApp', []);

app.factory('Service', function() {
 
 var Service = {
    foo: 'Shared service'
  };
 
 return Service;
});

Controller 1

app.controller('Ctrl1', function($scope, Service) {

  $scope.foo = Service.foo;

  Service.foo = 'I am from contoller 1';

  });

Here Service is the factory file name.

Controller 2

app.controller('Ctrl2', function($scope, Service) {
  
  $scope.foo = Service.foo;

});

Play in fiddle

3. Using $emit or $broadcast

---

You can communicate between controllers using $emit and $broadcast as well, check below example for that.

$scope.$emit('itemClicked', [_item]);
$rootScope.$on('itemClicked',function (e, args, status)
{
 //your actions  
});

$rootScope.$broadcast('$newItemsClicked');
$rootScope.$on('$newItemsClicked', function() {
 //your actions
});

4. Using Watch Concept.

---

Third method is using watch concept .Watch is a powerful feature of angular js. “$watch” concept in Angular is to observe the changes on the data of the scope from the controller.
Using Watch Concept

Related Posts

1. Angular flash message using directive

2. Angular routing

3. Rating Stars using angular js Directive concept

4. Communication between factory file and controller in Angular js