Sharing data between controllers AngularJS

Question

I'm trying to sent an array filled with objects from controller 1 to controller 2. But all I get in controller 2 is an empty array. The only way I get a filled one is when I create a static array in my service.

My service

app.service('myData', function () {
this.myData = [];

this.addData = function(data) {
    this.myData.push(data);
}
this.getData = function() {
    return this.myData;
}});

controller 1 which sets the data

app.controller('controller1',['$scope', 'myData', function($scope, myData) {
    $scope.addData = function(index, name) {
        myData.addData({index: index, name: name});
    }}]);

Controller 2 looks like this

app.controller('controller2',['$scope', 'myData', function($scope, myData) {

$scope.myData = myData.getData();
$scope.$watch('myData.getData()', function(data){
    console.log(data);
});
console.log($scope.myData);}]);

When I was searching for an answer I found alot of questions almost similar to mine. The only difference was that I fill my service from my controller instead of creating a static service.

Both my console.logs return an empty array. Why is this?

you need to use the root scope or one of the communicartion mechanism like the broadcast or events — Rafa
– Rafa, Commented Sep 18, 2015 at 12:36
your watch seems a little strange to me. try this function(){ return myData.getData() } instead of data.getData() — Jahongir Rahmonov
– Jahongir Rahmonov, Commented Sep 18, 2015 at 12:43

sdgluck · Accepted Answer · 2015-09-18 13:03:56Z

1

Your $watch expression should be a function (see the docs for $watch). Giving $watch a string tells Angular to inspect a property on the $scope. As well as this, you have mistakenly referenced your myData service as 'data' in the string 'data.getData()'.

1) Watch the result of myData#getData:

$scope.$watch(function () {
    return myData.getData();
}, function (data) {
    console.log(data);
});

2) Watch the reference to the myData service's internal array on $scope:

$scope.myData = myData.getData();
$scope.$watch('myData', function (data) {
    console.log(data);
});

edited Sep 18, 2015 at 13:03

answered Sep 18, 2015 at 12:43

sdgluck

27.8k12 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

michelem · Accepted Answer · 2015-09-18 12:46:25Z

0

It should work if you call the addData from the first controller for example:

JSFiddle

.controller('tourCtrl', ['$scope', 'myData', function ($scope, myData) {
    $scope.addData = function (index, name) {
        myData.addData({
            index: index,
            name: name
        });
    }
    $scope.addData('hello', 'world');
}])
.controller('controller2', ['$scope', 'myData', function ($scope, myData) {

    $scope.myData = myData.getData();
    $scope.$watch('myData', function (data) {
        console.log(data);
    });
    console.log($scope.myData);
}]);

answered Sep 18, 2015 at 12:46

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Comments

bahadir · Accepted Answer · 2015-09-18 12:49:39Z

0

i would suggest that you use something like pubsub mechanism. you can't know when will data appear. and watching a function is an expensive operation. You can build a PubSub mechanism on your service.

A controller could register for an event and another could publish that event. so with minimum resources you could achieve what you want.

here is a sample

app.factory('pubSubService', [function() {
var pubSubAPI = {};
var hooks = [];

pubSubAPI.publishEvent = function(message) {
    for (var i = 0; i < hooks.length; i++) {
        hooks[i](message);
    }
};

pubSubAPI.subscribeEvent = function(eventFunction) {

    hooks.push(eventFunction);
};

return pubSubAPI;
}]);

answered Sep 18, 2015 at 12:49

bahadir

7191 gold badge11 silver badges28 bronze badges

2 Comments

sdgluck Over a year ago

This type of functionality is already available in Angular.

bahadir Over a year ago

yes but this type of functionality on angularjs is for scopes. unless you want to use rootScope - which i am always trying to avoid. you cant use angular functionality on this issue

jonnie · Accepted Answer · 2015-09-18 12:54:24Z

Another Approach would be to use the Observer Pattern, saves having to use the $watchat all:

app.service('myData', function () {
    this.myData = [];
    var observers = [];
    var self = this;

    this.addObserver = function (callback) {
        observers.push(callback);
    };

    var notifyObservers = function () {
        angular.forEach(observers, function (callback) {
            callback(self.myData);
        });
    };


    this.addData = function (data) {
        this.myData.push(data);
        notifyObservers();

    }
});


app.controller('controller2', ['$scope', 'myData', function ($scope, myData) {

    myData.registerObserverCallback(function (data) {
        $scope.myData = data;
        console.log(data);
    });
}]);

Collectives™ on Stack Overflow

Sharing data between controllers AngularJS

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related