How To Share The Scope Variable Of One Controller With Another In Angularjs

In AngularJS, sharing the scope variable of one controller with another can be a useful way to pass data and communicate between different parts of your application. By understanding how to properly share scope variables, you can enhance the flexibility and functionality of your AngularJS projects. In this article, we will walk through the steps to achieve this seamlessly.

One method to share scope variables between controllers in AngularJS is by using the `$rootScope` service. The `$rootScope` is the top-most scope available to all AngularJS applications, and any variable stored in it can be accessed across different controllers. To utilize this, you simply assign the desired variable to the `$rootScope` object in the controller where it is defined.

app.controller('FirstController', function($scope, $rootScope) {
  $rootScope.sharedVariable = 'Hello from FirstController!';
});

app.controller('SecondController', function($scope, $rootScope) {
  $scope.sharedVariable = $rootScope.sharedVariable;
});

In this example, we first assign the `sharedVariable` to the `$rootScope` object in the `FirstController`. Then, in the `SecondController`, we access this variable by assigning it to the `$scope` object. This way, the variable can be accessed and used in both controllers effectively.

Another approach is to use AngularJS services as a medium to share data between controllers. By creating a service that holds the shared data, you can inject this service into multiple controllers and access the shared variable through it.

app.service('DataSharingService', function() {
  this.sharedVariable = 'Hello from DataSharingService!';
});

app.controller('FirstController', function($scope, DataSharingService) {
  $scope.sharedVariable = DataSharingService.sharedVariable;
});

app.controller('SecondController', function($scope, DataSharingService) {
  $scope.sharedVariable = DataSharingService.sharedVariable;
});

In this setup, the `DataSharingService` holds the `sharedVariable`, which is then accessed in both `FirstController` and `SecondController` by injecting the service and assigning the variable to the controller's scope. This method helps maintain a clean separation of concerns and promotes reusability.

Additionally, you can leverage AngularJS events to broadcast changes in a scope variable to other controllers. By using the `$rootScope.$broadcast`, you can send data from one controller and catch it in another.

app.controller('FirstController', function($scope, $rootScope) {
  $scope.sharedVariable = 'Hello from FirstController!';
  $rootScope.$broadcast('dataShared', $scope.sharedVariable);
});

app.controller('SecondController', function($scope) {
  $scope.$on('dataShared', function(event, data) {
    $scope.sharedVariable = data;
  });
});

In this scenario, the `FirstController` broadcasts the `sharedVariable` using `$rootScope.$broadcast`, and the `SecondController` listens for this event using `$scope.$on` to retrieve and assign the shared data. This method facilitates communication between controllers in an event-driven manner.

By combining these techniques strategically, you can seamlessly share scope variables between controllers in AngularJS, enhancing the interactivity and functionality of your applications. Experiment with these methods in your projects to discover the most suitable approach for your specific requirements. Happy coding!