Sharing data between controllers in Angular JS?

Question

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

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

However, it uses a data array. I just need one solid variable. Also, I do not know why it declares an additional object for the factory service that it creates; why not just use factory as an object?

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

Creating my factory / service:

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

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

Access to a 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 produce a shared variable that I am after?

Answer 1

You need to add the service 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 use controllerAs, you rarely (or don't need) to enter and use $ scope. Since controllerAs is a relatively new feature, then we have no choice but to use $ scope, so it’s not weird to find an example with $ scope.

---

Edit: If you are not using controllerAs (as in this example), you will need $ scope to display functions or variables in the view.

, , , . , , $watch, , , .

Jsbin

Answer 2

, angular, .

, factory, , , :

plnkr:

:

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;
      };

    }
]);

:

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());
    };

}]);