Passing variables between controllers using AngularJS

Question

I have two controllers: Controller1 and Controller2

In Controller1's $scope, I have set up all my values I need. Using the data in $scope, I'm trying to run certain functions and pass the return values to Controller2.

I was thinking about making a factory to pass variable from Controller1 to Controller2. However, I realized all input values I need lives in Controller 1. I wonder whether factory can persist the data when it runs in Controller1 and return that data when it runs again in Controller2.

Thanks

Nothing to show yet since i'm still proving the concept. I was looking for an answer whether this plausible or not. — Kahsn, Apr 26 '16 at 18:44
If you want to transfer data, a [service](https://docs.angularjs.org/guide/services) would do the trick. [Take a look](http://stackoverflow.com/questions/12008908/angularjs-how-can-i-pass-variables-between-controllers?rq=1) — tpsilva, Apr 26 '16 at 18:47
there's a lot of different scenarios that would change the implementation.. we'd need more details. — Hugo S. Mendes, Apr 26 '16 at 18:47

score 3 · Accepted Answer · answered Apr 26 '16 at 19:40

Factory is a singleton so it can be used to share data among different controllers or directives. Take a look at the fiddler here. I have created a factory 'sharedContext' which can be used to share any key-value pair across controllers using different $scope.

Factory

myApp.factory("sharedContext", function() {
  var context = [];
  var addData = function(key, value) {
    var data = {
      key: key,
      value: value
    };
    context.push(data);
  }
  var getData = function(key) {
    var data = _.find(context, {
      key: key
    });
    return data;
  }

  return {
    addData: addData,
    getData: getData
  }
});

From the controller that needs to share the object can call the 'addData' method of the factory to store the data under a key. The other controllers/directives which are interested in accessing the shared data can do so by calling the 'getData' method and passing the correct key.

Controller (Sharing Data)

function MyCtrl_1($scope, sharedContext) {
  $scope.input_1 = 5;
  $scope.input_2 = 15;

  $scope.add = function() {
    $scope.result = $scope.input_1 + $scope.input_2;
    sharedContext.addData("Result", $scope.result)
  }
}

Controller (accessing shared data)

function MyCtrl_2($scope, sharedContext) {
  $scope.getData = function() {
    $scope.result = sharedContext.getData("Result").value;
  }
}

The only assumption here is that both the controllers need to use the exact key to share the data. To streamline the process you can use a constant provider to share the keys. Also note that I have used underscore.js to look for the key in the shared context dictionary.

maurycy · Answer 2 · 2016-04-26T19:01:34.750

This is the simplest solution that you can come up with. As you can see the factory is a simple object and because of that construct it's passed by reference not by value that means in both controller dataFactory is the same

http://plnkr.co/edit/eB4g4SZyfcJrCQzqIieD?p=preview

var app = angular.module('plunker', []);
app.controller('ControllerOne', function (dataFactory) {
    this.formFields = dataFactory
});
app.controller('ControllerTwo', function (dataFactory) {
    this.formData = dataFactory
});
app.factory('dataFactory', function () {
    return {};
})

edit

app.factory('dataFactory', function () {
    var factory = {
        method1: function (arg) {
            console.log('method1: ', arg)
            factory.method2('called from method1')
        },
        method2: function (arg) {
            console.log('method2: ', arg)
        }
    }
    return factory;
})

I see. if there are multiple functions within the factory, how do you call one function in other function? Can you shown an example for this? — Kahsn, Apr 26 '16 at 18:50
Create functions inside the object the factory function returns. — dmeglio, Apr 26 '16 at 18:58

Passing variables between controllers using AngularJS

2 Answers2

edit