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
– Kahsn, Commented Apr 26, 2016 at 18:44
If you want to transfer data, a service would do the trick. Take a look — tpsilva
– tpsilva, Commented Apr 26, 2016 at 18:47
there's a lot of different scenarios that would change the implementation.. we'd need more details. — Hugo S. Mendes
– Hugo S. Mendes, Commented Apr 26, 2016 at 18:47

Pratik Bhattacharya · Accepted Answer · 2016-04-26 19:40:56Z

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 · Accepted Answer · 2016-04-26 19:01:34Z

0

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

edited Apr 26, 2016 at 19:01

answered Apr 26, 2016 at 18:47

maurycy

8,4201 gold badge30 silver badges44 bronze badges

2 Comments

Kahsn Over a year ago

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?

dmeglio Over a year ago

Create functions inside the object the factory function returns.

Collectives™ on Stack Overflow

Passing variables between controllers using AngularJS

2 Answers 2

Comments

edit

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

edit

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related