Can not share variables in angular controllers

Question

I am new to angular js. I have two ng-controller in two Html page. I want to share data from one controller into another controller. Here is the service i have created:

app.service('sharedProperties', function() {
    var stringValue = 'test string value';
    var objectValue = {
        data: 'test object value'
    };

    return {
        getString: function() {
            return stringValue;
        },
        setString: function(value) {
            stringValue = value;
        },
        getObject: function() {
            return objectValue;
        }
    }
});

Here is controller1:

 app.controller('FirstCtrl',function($scope,sharedProperties){
         sharedProperties.setString("Hi");
  });

Here is controller2:

app.controller('SeccondCtrl',function($scope,sharedProperties){
               window.alert(sharedProperties.getString());

});

Instead of getting alert containing string 'Hi' i am getting 'test string value'.

NB. i am using FirstCtrl and SeccondCtrl in two HTML file. And after setting string from FristCtrl i redirect to the second HTML file .

possible duplicate of [Passing data between controllers in Angular JS?](http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js) — Abdel Raoof Olakara, Apr 22 '15 at 10:41
The controller2 may be running first. The page code or a fiddle will clarify the case. — Nikos Paraskevopoulos, Apr 22 '15 at 10:44
I have followed that toh. But it is not working. May be because i load the new page after setting data from controller1 ?????? — Rafi Ud Daula Refat, Apr 22 '15 at 10:44
Thanks. i have understood. What can be done to share the data in these case. Is there any technique ?? @ArepalliPraveenkumar — Rafi Ud Daula Refat, Apr 22 '15 at 11:12
@RefatRafi Please checkout the angular Cookies https://docs.angularjs.org/api/ngCookies/service/$cookieStore — Arepalli Praveenkumar, Apr 22 '15 at 11:15

score 1 · Answer 1 · answered Apr 22 '15 at 10:53

1

I've created jsfiddle and it works fine.

app.controller('FirstCtrl',function($scope,sharedProperties){
    $scope.set =  function(){
        sharedProperties.setString("Hi");
    }
  });

app.controller('SeccondCtrl',function($scope,sharedProperties){
    $scope.get = function(){
        window.alert(sharedProperties.getString());
    }

});

answered Apr 22 '15 at 10:53

Oleksii

328
3
17

It is not working when i am having the two controllers in different view (Html file). I am setting data from onek Html and want to show the data in another Html. – Rafi Ud Daula Refat Apr 22 '15 at 10:55
Understand your situation. It's a pity that jsFiddle doesn't allow create multiply files. Plunker can help us to figure out the problem.. – Oleksii Apr 22 '15 at 11:00

score 0 · Answer 2 · answered Apr 22 '15 at 11:13

I don't understand why you set the methods under a return, why not try this approach on the service?. Either way you could set the service as a function under $scope ($scope.sharedProperties) in your main js, making it "globally" usable.

app.service('sharedProperties', function() {
    var stringValue = 'test string value';
    var objectValue = {
        data: 'test object value'
    };
        this.getString: function() {
                return stringValue;
        };
    this.setString: function(value) {
            stringValue = value;
        };
    this.getObject: function() {
            return objectValue;
       };
    return {
        getString: getString,
        setString: setString,
        getObject: getObject
    }
});

score 0 · Answer 3 · answered Jun 09 '17 at 04:40

Service have this reference you write your service method as per below

app.service('sharedProperties', function() {
        var stringValue = 'test string value';
        var objectValue = {
            data: 'test object value'
        };

       this.getString: function() {
                return stringValue;
            }
       this.setString: function(value) {
                stringValue = value;
            }
        this.getObject: function() {
                return objectValue;
            }

    });

Can not share variables in angular controllers

3 Answers3

Linked