Access data from one controller to another controller- AngularJS

Question

addressbookController :

$http({
        method: 'GET',
        url: '/api/getnewgroup'
    })
    .then(function (response) {
        $scope.draft.groups = response.data;
        $scope.groups = response.data; // updated
    }, function (response) {
        console.log(response);
    });

In this above controller, i am getting json response in $scope.draft.groups, I have this draft object in another controller called profsmsController.

profsmsController :

$scope.draft = {
            draftType: '',
            scheduledTime: '',
            senderdata: '',
            draftData: {
                contacts: ''
            },
            groups: {
                select: false
            },
            senderName: '',
            message: '',
            draftName: '',
            createdOn: '',
            updatedOn: ''
        };

How to access $scope object ?

My Controller:

angular
    .module('sampleApp.controllers', [])

    //addressbook page controller
    .controller('addressbookCtrl', function ($http, $scope, $rootScope, $location,
        $state, toastr, $timeout, $window, sharedService) {

        // Groups

        // get group

        $http({
            method: 'GET',
            url: '/api/getnewgroup'
        })
        sharedService.getDraftPromise().then(function (response) {
            $scope.groups = response.data;
            $scope.draft.groups = response.data;
        }, function (response) {
            console.log('error');
        });

})



.controller('profsmsCtrl', function ($http, $scope, $rootScope, $location,
                $state, toastr, $timeout, $window) {



                /* for drafts */

                $scope.draft = {
                    draftType: '',
                    scheduledTime: '',
                    senderdata: '',
                    draftData: {
                        contacts: ''
                    },
                    groups: {
                        select: false
                    },
                    senderName: '',
                    message: '',
                    draftName: '',
                    createdOn: '',
                    updatedOn: ''
                };


                //add draft
                $scope.addmanualInputDraft = function () {
                    $http.post('/api/addmanualinputdraft', $scope.draft).then(function (response) {
                        toastr.success("Added successfully!");
                        $('.bd-example-modal-lg-manual').modal('hide');
                        $state.reload();
                    });
                }
        })

My services.js:

angular
   .module('sampleApp.services', [])
   .factory('sharedService', function ($http) {

      var draftPromise = $http({
         method: 'GET',
         url: '/api/getnewgroup'
      });
      return {
         getDraftPromise: function () {
            return draftPromise;
         }
      };

   });

my app.js:

'use strict';
angular
  .module('sampleApp', ['sampleApp.controllers', 'sampleApp.directives','sampleApp.services','sampleApp.filters','ui.router','toastr','ngSanitize', 'ui.select'])
  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.hashPrefix('');
    $urlRouterProvider.otherwise('/dash');
    $stateProvider
      .state('dash', {
        url: '/dash',
        templateUrl: 'partials/dash',
      })
      .state('quicksms', {
        url: '/quicksms',
        templateUrl: 'partials/quicksms',
        controller: 'quicksmsCtrl'
      })
      .state('professionalsms', {
        url: '/professionalsms',
        templateUrl: 'partials/professionalsms',
        controller: 'profsmsCtrl'
      })
      .state('file2sms', {
        url: '/file2sms',
        templateUrl: 'partials/file2sms',
        controller: 'file2smsCtrl'
      })
      .state('addressbook', {
        url: '/addressbook',
        templateUrl: 'partials/addressbook',
        controller: 'addressbookCtrl'
      })
  });

This is updated full code. I want to access $scope.draft.groups object from addressbook Controller.

Create service which will be responsible for sharing a data amongst different component of your application — Pankaj Parkar
– Pankaj Parkar, Commented Jan 6, 2018 at 5:58
I dont know to create a service, will you share some piece of code? i will learn from this. — Sameer
– Sameer, Commented Jan 6, 2018 at 5:58

Christian Santos · Accepted Answer · 2018-01-06 06:16:17Z

2

In general, you'd want to create a service that holds your shared data:

myApp.factory('sharedService', function($http) {

    var draftPromise = $http({
        method: 'GET',
        url: '/api/getnewgroup'
    });

    return {
        getDraftPromise: function() {
            return draftPromise;
        }
    };
});

In your controllers, you can then use the service by declaring it as a dependency:

myApp.controller("myController", function($scope, sharedService) {

    sharedService.getDraftPromise().then(function(response) {
        $scope.draft.groups = response.data;
    });
});

Both controllers will refer to the same instance of draftPromise.

Note: if you are minifying your code, you'll want to use the alternate syntax for dependency injection that uses arrays. Take a look at the official documentation for dependency injection.

edited Jan 6, 2018 at 6:16

answered Jan 6, 2018 at 6:01

Christian Santos

5,4551 gold badge20 silver badges24 bronze badges

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

5 Comments

Christian Santos Over a year ago

Take a look at updated answer -- you have to declare sharedService as a dependency in your controllers

Christian Santos Over a year ago

If you're using minified code, you'll want to use the syntax of dependency injection that uses an array like so: myApp.controller("myController", ["$scope", "sharedService", function($scope, sharedService) { ... }]);. Otherwise, your controller will not recognize $scope or sharedService when the code is minified

Sameer Over a year ago

thats not the problem , see my draft object, I have group inside my draft object. See my response i am storing that response in $scope.draft.groups, but in this It only taking $scope.draft and throwing console as "TypeError: Cannot set property 'groups' of undefined".

Christian Santos Over a year ago

You'll need to make sure that $scope.draft is defined before setting $scope.draft.groups. You can do something like: $scope.draft = { groups: response.data }, which will define $scope.draft and $scope.draft.groups in the same statement.

Christian Santos Over a year ago

Seems like there might be a bug somewhere -- are you able to post full code of the controller?

Collectives™ on Stack Overflow

Access data from one controller to another controller- AngularJS

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related