Sharing data between controllers in Angular JS?

Question

Before this is marked as duplicate I've read quite of few similar questions, but all the answers I've found seem to use $scope, and after reading the documentation I'm not really sure I understand $scope, or why I'd use it in this situation.

I found this tutorial which describes how to do what I'm trying to do.

However, it's using an array of data. I just need one solid variable. In addition, I don't know why he's declaring an additional object to the factory service he creates; why not just use the factory as the object?

I was thinking I could do something like this, but I'm not sure if it will work or not.

Creating my factory/service:

var demoModule = angular.module("demoModule", []);

demoModule.factory("demoService", function() {
     var demoSharedVariable = null;
     return demoSharedVariable;
});

Accessing the shared variable in each controller:

var demoControllerOne = demoModule.controller("demoContollerOne", function(demoSharedVariable) {
     this.oneFunction = function(oneInput){
          demoSharedVariable = oneInput;
     };
});

var demoControllerTwo = demoModule.controller("demoContollerTwo", function(demoSharedVariable) {
     this.twoFunction = function(twoInput){
          demoSharedVariable = twoInput;
     };
});

Will this method produced the shared variable I'm after?

Icycool · Accepted Answer · 2015-06-29 07:35:45Z

2

You need to inject the service in order to use it, then access the service variable.

demoModule.controller("demoContollerOne", function($scope, demoService) {
  $scope.oneFunction = function(){
    demoService.demoSharedVariable = $scope.oneInput;
  };
});

demoModule.controller("demoContollerTwo", function($scope, demoService) {
  $scope.twoFunction = function(){
    demoService.demoSharedVariable = $scope.twoInput;
  };
});

If you are using controllerAs, you rarely (or shouldn't) need to inject and use $scope. As controllerAs is a relatively newer feature, back then we have no choice but to use $scope, so it is not strange to find example with $scope.

Edit: If you are not using controllerAs (like in this example) you would need $scope to expose functions or variables to the view.

There are several place that are not correct I've found while fiddling with it, I'll edit the code. I don't know how to showcase the effect without using advanced concept like $watch, please provide your own fiddle if you don't understand.

Jsbin

edited Jun 29, 2015 at 7:35

answered Jun 29, 2015 at 5:53

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Allenph Over a year ago

So, as to avoid missing anything, all I need to do is add the demoService factory into the dependencies for the controller IN ADDITION to demoSharedVariable? I.E. I have to add the service to the controller dependencies and the variable within the service?

Icycool Over a year ago

and returning the service as an object instaed of the data itself return {demoSharedVariable: demoSharedVariable}

Allenph Over a year ago

You've lost me. Could you please update my snippet with an example?

huan feng · Accepted Answer · 2015-06-29 07:20:23Z

One important thing is if you want to use angular, you have to understand the knowledge of scope.

Since neither you factory or controller is correct, i write a simple example for you to help you understand the service:

detail implementation in this plnkr:

service:

angular.module('myApp').service('MyService', [function() {

      var yourSharedVariable; // Your shared variable

      //Provide the setter and getter methods
      this.setSharedVariable = function (newVal) {
        yourSharedVariable = newVal;
      };

      this.getSharedVariable = function () {
        return yourSharedVariable;
      };

    }
]);

controller:

myApp.controller('Ctrl2', ['$scope', 'MyService', '$window', function($scope, MyService, $window) {//inject MyService into the controller
    $scope.setShared = function(val) {
      MyService.setSharedVariable(val);
    };

    $scope.getShared = function() {
      return MyService.getSharedVariable();
    };

    $scope.alertSharedVariable = function () {
      $window.alert(MyService.getSharedVariable());
    };

}]);

Collectives™ on Stack Overflow

Sharing data between controllers in Angular JS?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related