sharing data[array] between controllers

Question

I need to share data between controllers. My data is actually an array. I am able to share the data successfully but I have one more requirement. I need to clear this array from one of the controller. I have written a function sharedService.clear() in my sharedService. But that doesn't work. What am I doing wrong here?can anyone please help.

services.service('sharedProperties', function () {
   var sharedService =  {};

    sharedService.personArray = [];

    sharedService.setPersonArray = function(newObj) {
       this.personArray.push(newObj);
    };
    sharedService.getPersonArray = function(){
        return this.personArray;
    };

    sharedService.clear = function(){
        this.personArray = [];
    };
    return sharedService;

});

Is this.personArray1.push(newObj); a typo? Should be this.personArray.push(newObj); — kubuntu
– kubuntu, Commented Feb 6, 2014 at 23:42
service is built around the this object, factory is buod around the return. I believe you are mixing these up. — Matthew.Lothian
– Matthew.Lothian, Commented Feb 6, 2014 at 23:52
Thanks @Matthew.Lothian. Can you please tell me the right way of doing it. — user911
– user911, Commented Feb 7, 2014 at 0:51

Community · Accepted Answer · 2017-05-23 12:24:59Z

4

It looks like you've confused a factory with a service in the way you have defined it. Try the below code instead:

services.service('shareProperties', function() {
 this.personArray = [];

 this.clear = function() {
  this.personArray = [];
  }
});

Also, see AngularJS: Service vs provider vs factory for more details

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Feb 6, 2014 at 23:50

link64

1,9661 gold badge26 silver badges43 bronze badges

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

5 Comments

user911 Over a year ago

do you mean I don't need the declaration var sharedService = {};

user911 Over a year ago

If I remove this and try your code , while accessing sharedService like this sharedProperties.getPersonArray(); I get error 'unresolved method or function getPersonArray()'.

link64 Over a year ago

No, and you do not need to return an object either. Read the link that I posted for a deeper explanation about the differences between factory, service and provider

link64 Over a year ago

I didn't reimplement all your functions. If you want access to the personArray, just use: shareProperties.personArray

user911 Over a year ago

Thanks!! I a new to Angular and messed up with services and factory. Thank you so much for clearing the concept.

Matthew.Lothian · Accepted Answer · 2014-02-07 03:55:31Z

3

From what you have explained you want a static service that shares person across controllers

services.service('sharedProperties', [function () {

    this.personArray = [];

    this.setPersonArray = function(newObj) {
       this.personArray.push(newObj);
    };
    this.getPersonArray = function(){
        return this.personArray;
    };

    this.clear = function(){
        this.personArray = [];
    };

}]);

Anything declared on the this object will be available when referencing the sharedProperties service. Declaring something with var will make it private to the sharedProperties scope and only be available from within the service.

in the first example getPersonArray will return a reference to personArray and i could change or edit the value of sharedProperties and by reference personArray anyway i want making the access methods pretty meaningless.

So you might instead do this to protect your personArray

services.service('sharedProperties', [function () {

    // private
    var personArray = [];

    this.setPersonArray = function(newObj) {
       personArray.push(newObj);
       return [].concat(personArray);
    };
    this.getPersonArray = function(){
        // will return a copy of the personArray at the time of request
        return [].concat(personArray);
    };    
    this.clear = function(){
        personArray = [];
        return [].concat(personArray);
    };

}]);

This way you can only edit the private personArray with your methods. But it does require you to call getPersonArray() to sync any changes between controllers.

I tend to use factories for instance objects or constructor function rather than static like objects.

edited Feb 7, 2014 at 3:55

answered Feb 7, 2014 at 2:00

Matthew.Lothian

2,09218 silver badges23 bronze badges

4 Comments

user911 Over a year ago

why there is a return statement in setPersonArray and clear? I thought it would be only for getPersonArray.

Matthew.Lothian Over a year ago

because we are updating the internal personArray then returning a copy of it. If the value of sharedProperties is changed from the outside it will not affect the private personArray. So when you set or clear sharedProperties we return the updated sharedProperties

user911 Over a year ago

Thanks!! your answer is very detailed and have helped me a lot in clearing my concepts. I want to accept it but I still have this last issue. While accessing this shared service in my controller , I get error 'unresolved method or function getPersonArray()'.If I change it back to my old code, I can access getPersonArray(). What's wrong?

myApp.controller('SubmitController' , ['$scope' , 'sharedProperties', function($scope  , sharedProperties ){  $scope.submitGridData = function( ) { alert(sharedProperties.getPersonArray()); }; }]);

user911 Over a year ago

Thanks!! I have accepted your answer because this one gives more information to a novice like me.

Collectives™ on Stack Overflow

sharing data[array] between controllers

2 Answers 2

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related