CODEWITHSUNDEEP
angularjsservicecontrollerpersistence
crackedcornjimmy
crackedcornjimmy

Reputation: 1992

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

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>

Upvotes: 1

Views: 22

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222652

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>

Upvotes: 1

Related Questions