How to share data between controllers : Whats wrong with this code?

ionic-v1
1

Hello All,

I am newbie in angular js and ionic framework.

I am trying to create some variables in service/factory and try to add data in to those variables from controllers. I am getting error on below code. Can anybody please help me.

pmApp.service('DataService', function () {

    var selection = [];
    var selection1 = [];

    var jsonData = {};
    var jsonTrackedData = {};

    DataService.setSelectedData = function (value) {
        selection.push(value);
    };
    DataService.setTrackedData = function (value) {
        selection1.push(value);
    };
    DataService.getTrackedData = function () {
        return selection1;
    }
    DataService.getSelectedData = function () {
        return selection;
    }
    return DataService;
});


pmApp.controller('CheckboxController', function ($scope, DataService) {
    $scope.devList = [{
        text: "Device & app history",
        details: "Allows the app to view one or more of: information about activity on the device, which apps are running, browsing history and bookmarks",
        checked: true
    }, {
        text: "Identity",
        details: "Uses one or more of: accounts on the device, profile data",
        checked: false
    }, {
        text: "Calendar",
        details: "Uses calendar information",
        checked: false
    }, {
        text: "Contact",
        details: "Uses contact information",
        checked: false
    }];


    $scope.selection = [];
    $scope.selection1 = [];
    // toggle selection for a given employee by name
    $scope.toggleSelection = function toggleSelection(item) {
        var idx = $scope.selection.indexOf(item);
        var jsonO = angular.copy(item);
        jsonO.timestamp = Date.now();



        DataService.setTrackedData(jsonO);
        $scope.selection1 = DataService.getTrackedData();

        // is currently selected
        if (idx > -1) {
            $scope.selection.splice(idx, 1);

        }
        // is newly selected
        else {
            DataService.setSelectedData(item);
            $scope.selection = DataService.getSelectedData();
            /* $scope.selection.push(item);*/
        }
    };

});

Error is like this ->

ReferenceError: DataService is not defined
    at new <anonymous> (http://localhost:8100/js/app.js:82:5)
    at e (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:67:315)
    at Object.instantiate (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:67:432)
    at Object.<anonymous> (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:68:184)
    at Object.e [as invoke] (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:67:315)
    at Object.$get (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:65:268)
    at Object.e [as invoke] (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:67:315)
    at http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:69:110
    at d (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:67:13)
    at e (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:67:283) <div ui-view="">

Thanks in advance.

2

It doesn’t look like you defined DataService in your service :stuck_out_tongue:

So up in your variables with jsonData and jsonTrackedData I would add

var DataService = {};

as well and I am thinking that should be good. Otherwise when you’re defining setSelectedData and setTrackedData it’s trying to define those to ‘undefined’, so your service is never actually made.

Try that out and let us know if that solves it

1 Like
3

Yes It works But they have not defined here in this sample example

http://jsfiddle.net/sfqo2fn3/

One more question, Whats difference between service and factory here.?

Thanks a lot for your reply.

4

They are defined in there, but the way you write a factory and service is a little different. You’ve got your code a little mixed up, which is fine, these are really confusing at first haha!

A service is an instance of an object (that’s a really simple way of saying it). Angular will put this object in your scope using the ‘new’ keyword.

A factory is an object that is available across all your controllers it’s listed in.

For example I could have a service that sets ABC and returns ABC. If I set ABC to equal “123” and return it, it will say “123”. But if I go to a new controller and get ABC, it will say undefined, or whatever the default value was.

If I made this a factory, and I set ABC in the factory, move to a new controller, ABC will still be what I set it to.

Here is an amazing article that goes more into detail and it helped me a lot when I first was working with these:

You’re on the right track, though

1 Like
5

Thanks a lot for your reply. You saved my time.

I am not able to understand how in those examples factory/service is defined differently.

Shall I change my line from this to this

pmApp.service('DataService', function () {

to

pmApp.factory('DataService', function () {

My ultimate goal is want to add data in one json from two controllers.

Thanks again. Looking for your great answer.

6

Then a factory is your best option, you’ve got it right :smile:

The service is good for utility stuff or global variables that don’t need to be changed. The factory will be better for what you are doing because you can use it in more than one place and the data will persist.

No problem

1 Like
7

Thanks for your help.

Can you please take a look on my this question.

I am stuck with this problem since last 2 days