Passing Data Between Controllers via a Service in AngularJS Does Not Work

Question

I have two controllers like so:

myApp.controller('Ctrl1', ['$scope', '$filter', '$http', 'DataService', function ($scope, $filter, $http, DataService){
    DataService.set('HelloWorld', 'TheValue')
    alert(DataService.value.TheValue + 'in Ctrl1');
}]);

myApp.controller('Ctrl2', ['$scope', '$filter', '$http', 'DataService', function ($scope, $filter, $http, DataService){
    alert(DataService.value.TheValue + ' in Ctrl2');
}]);

And my service is defined like so:

myApp.service("DataService", function () {

    var data = {
        TheValue: null
    };

    function set(value, field) {
        data[field] = value;
    }

    return {
        set: set,
        value: data
    };
});

In Ctrl1, the alert shows that the value of TheValue is correctly HelloWorld. But when I navigate to Ctrl2, TheValue becomes null.

How do I get the TheValue value in DataService to persist between controllers?

Edit:

Here is how I navigate between controllers:

My application is a Asp.Net MVC app. Ctrl1 is the AngularJS controller for the Dashboard page, while Ctrl2 is the controller for the next page via a button click and the routing to the new Asp.Net controller.

Dashboard Page snippet:

<body>
<div class="row" ng-controller="Ctrl1">

    <div class="col-sm-4">
            <ul class="dashboard-list">
                <li>
                    <div class="tile">
                        <a href="/NextPage" title="The Next Page">
                            <h2>Schedule New Visit</h2>
                        </a>
                    </div>
                </li>
            </ul>
    </div>
    </body>

Then, NextPage is just like so:

<body>
    <div ng-controller="Ctrl2"  class="ng-cloak">
          @*Page stuffz here...*@
    </div>
</body>

could you share the actual code ?

korteee
– korteee

2017-11-13 16:50:04 +00:00
Commented Nov 13, 2017 at 16:50 — korteee
– korteee, Commented Nov 13, 2017 at 16:50
What do you mean by "navigate to Ctrl2"?

georgeawg
– georgeawg

2017-11-13 16:54:58 +00:00
Commented Nov 13, 2017 at 16:54 — georgeawg
– georgeawg, Commented Nov 13, 2017 at 16:54
I added the html. I hope that helps.

crackedcornjimmy
– crackedcornjimmy

2017-11-13 17:04:41 +00:00
Commented Nov 13, 2017 at 17:04 — crackedcornjimmy
– crackedcornjimmy, Commented Nov 13, 2017 at 17:04

Sajeetharan · Accepted Answer · 2017-11-13 16:29:03Z

1

It works fie with the following code. Make sure you have the controller set.

DEMO

var myApp = angular.module('testApp',[]);

myApp.controller('Ctrl1', ['$scope', 'DataService', function ($scope, DataService){
$scope.setData = function(){
    DataService.set('HelloWorld', 'TheValue')
    alert(DataService.value.TheValue + 'in Ctrl1');
  };
}]);

myApp.controller('Ctrl2', ['$scope', 'DataService', function ($scope, DataService){
$scope.getData = function(){
    alert(DataService.value.TheValue + ' in Ctrl2');
   };
}]);

myApp.service("DataService", function () {

    var data = {
        TheValue: null
    };

    function set(value, field) {
        data[field] = value;
    }

    return {
        set: set,
        value: data
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" >
<div ng-controller="Ctrl1">
<button ng-click="setData()">SET
</button>
</div>
<div ng-controller="Ctrl2">
<button ng-click="getData()"> GET
</button>
</div>

</body>

answered Nov 13, 2017 at 16:29

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

6 Comments

crackedcornjimmy Over a year ago

Does it matter that my controllers are in different body tags? Separate .cshtml files?

Sajeetharan Over a year ago

no that does not matter. you are probably not setting the controller

crackedcornjimmy Over a year ago

What does "setting the controller" mean and how is it any different than doing the set and get of the TheValue outside of a declared function, like I am doing? I don't see how your code is markedly different than mine. Can you highlight where I am not doing something correctly?

Sajeetharan Over a year ago

Check if there any issue in console

crackedcornjimmy Over a year ago

There is no issue in the console.

|

Collectives™ on Stack Overflow

Passing Data Between Controllers via a Service in AngularJS Does Not Work

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related