CODEWITHSUNDEEP
javascriptangularjs
Kahsn
Kahsn

Reputation: 1045

Passing variables between controllers using AngularJS

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

Upvotes: 0

Views: 4792

Answers (2)

Pratik Bhattacharya
Pratik Bhattacharya

Reputation: 3746

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.

Upvotes: 3

maurycy
maurycy

Reputation: 8465

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

Upvotes: 0

Related Questions