how do i get the service response data into the md dialog angularjs?

Question

i have created the custom service like this

  app.service('userService', function($http,UrlService) {
    return {
        init: function(callback) {
            $http.get(UrlService.baseUrl +'/api/users/list').then(function(user_response) {
                callback(user_response);

            });
        }
    }
})

Inside of my project main controller i have used like this to get the angular material design modal.

  $scope.replyComplaint = function(user,complaint_id) {

        complaint_id=user._id;
        console.log(complaint_id)
        $mdDialog.show({
                controller: DialogCtrl,
                templateUrl: 'submodules/user_management/replydialog.html',
                resolve: { complaint_id : function() {return complaint_id;} },
                 locals: {
                   users: $scope.users
                 },
                parent: angular.element(document.body),
                clickOutsideToClose: true,
            })
            .then(function(response) {
                $scope.response = response;
                console.log(response);
            }, function() {
                //fail
            });
    };

created another controller for dialog as in the angular material docs as follows

function DialogCtrl($scope, $rootScope, $mdDialog, users,complaintService, UrlService, $http) {
    complaintService.init(function(complaint_response) {
           $scope.complaints = complaint_response.data;
           $scope.getUsers();
        });

$scope.getUsers = function(complaint_id) {
     console.log(complaint_id);
    $scope.hide = function() {
        $mdDialog.hide();
    };
    $scope.cancel = function() {
        $mdDialog.cancel();
    };
    $scope.replyMail = function(complaint_id) {
             console.log(complaint_id);
        $http.post(UrlService.baseUrl + '/api/complaints/complaint/'+complaint_id , {
                complaint: "replyText"
            }, $scope)
            .then(function(response) {
                console.log(name);
                $state.reload();
            }, function(response) {
                console.log(name);
            });
    }
}
}

Now, i need to get the user_response data in DialogController. if i put console.log('$scope.users') inside of this userservice.init function, i can get the data. but not outside of it. how to get the response data outside of the userService.init function

 userService.init(function(user_response) {
        $scope.users = user_response.data; 
    });        //this is added in DialogController

Main intension is to get the user.comlaint_id in the post request of reply mail function . that user.complaint_id is a part of the user_response Anyone please help me. Thanks

Answer 1

The $http.get call returns a promise, you can just use that.

app.service('userService', function($http,UrlService) {
  return {
    init: function(callback) {
        return $http.get(UrlService.baseUrl +'/api/users/list');
    }
  }
});

Controller:

function Dialog($scope,$rootScope, $mdDialog,userService,UrlService,$http) {
  // console.log(userService.init());

  init();

  function init() {
    userService.init().then(function(response) {
      $scope.users = response.data; 
    });
  }
}

This also has the advantage of easier error handling:

function Dialog($scope,$rootScope, $mdDialog,userService,UrlService,$http) {
  // console.log(userService.init());

  init();

  function init() {
    userService.init().then(function(response) {
      $scope.users = response.data; 
    }, function(error) {
      // handle error
    });
  }
}    

You should read up on angular/javascript promises and their chaining mechanism: angular promises

Answer 2

Here is the solution

userService.init(function(user_response) {
    $scope.users = user_response.data;
    $scope.init();
});

$scope.init = function() {
You can access $scope.users here
}

Call any method instead of init() in which you require $scope.users