Accessing data from another controller


#1

This is more of angular question but, i’m hoping to get a simple answer here.
So i have 2 controllers, controllerA and controllerB. controllerA can access data from a service and process it. What i want is controllerB can access the processed data from controller A. There are a few suggestions like using rootscope or using a service, but i think using a service won’t work.
is there a simple way to do this ?


#2

I use factories to proces data. I put the processed data back in the factory object. You can inject factory into everything controller you want. So you have access to the functionaliteit of the factory and the processed data.


#4

If the two controller are on the same view you can broadcast an event with scope.$broadcast from scopeA down to scopeB.

ScopeB listens to the event with scope.$on. As payload of the event you can send the processed data or use scope inheritance.

If both controller are not on the same view. You can share the processed data via a service or ui-router parameter

Regards


#5

I currently have a factory service that is injected into two views.

I then modify an object within one view but it doesnt change in the other despite using $rootscope.$broadcast in my service and $scope.$watch and $scope.$on in each controller.

The modification does happen within my view though, just not across views.

My code is based off this: http://www.objectpartners.com/2013/08/21/using-services-and-messages-to-share-data-between-controllers-in-angularjs/

UPDATE: codepen http://codepen.io/skotturi/pen/ogqPrR?editors=101
The value you type in the Home form should update the username in the About tab as well, but does not.


#6

i use ui-router parameter to inject array index, but i service since it can store objects


#7

I wrote a pretty detailed post on SO about this. http://stackoverflow.com/questions/25494324/pass-variable-from-view-to-another-controller-angularjs/25496771#25496771


#8

To make it work, you just need to put your controllers scope in Memory

var app = angular.module('app', []);
app.factory('Scopes', function($rootScope) {
    var mem = {};
    return {
        store: function(key, value) {
             mem[key] = value;
        },
             get: function(key) {
             return mem[key];
         }
    };
})

Source controller code :

app.controller('FirstController', function ($scope) {
    Scopes.store('FirstController', $scope);
    $scope.v1 = "One";
    $scope.buttonClick = function () {
        console.log("buttonClick function called");
    };
});

To access this in another controller :

app.controller('SecondController', function (Scopes, $scope) {
   console.log( Scopes.get('FirstController').v1);
   Scopes.get('FirstController').buttonClick();
});

#9

Depending on your use case this approach can cause a huge memory leak. The mem var contains all scopes which never gets cleared.

Regards


#10

Its very easy to clear mem variable

var app = angular.module('app', []);
app.factory('Scopes', function($rootScope) {
    var mem = {};
    return {
        store: function(key, value) {
             mem[key] = value;
        },
        get: function(key) {
             return mem[key];
        },
        clear: function(key) {
             mem[key] = null;
        }
    };
})

In second controller after use :

Scopes.clear('FirstController');