AngularJS and an async function inside of a service

Question

I am having this issue with an async function. The point is that the "execution" is not waiting for the return of NotificationService.confirm callback.

I mean, that shows a PhoneGap alert, but it's not waiting for evaluate which button pressed the user. So, you can see in the console output undefined instead of false/true/3 values

[EDIT]

This is the code proposed by Maxim Shoutin, but it isn't working yet:

NotificationController.js

angular.module('app').controller("NotificationController", function($rootScope) {

    $rootScope.cancel_button = function() {
      var confirm = NotificationService.confirm("Do you want to confirm?", 'Yes!');

      confirm.then(function(result) {
        console.log('Confirm: ' + result);
        if(confirm)   $location.path('/menu');
      }, function(result) {
        console.log('No data returned');
      })
    }

   /* Additional controller code... */
}

NotificationService.js

angular.module('app').factory("NotificationService", function() {

  // Callback function
  var onConfirm = function(button) {
    console.log('Callback function called!!!');
    if(button == 1)       return false;
    else if(button == 2)  return true;
    else if(button == 3)  return 3;
    else                  return false; // dismissed without press button
  };

 return {
     confirm : function(alert_msg, title, buttonsArray) {

        var deferred = $q.defer();

        if(buttonsArray == null) {
             buttonsArray = ['Cancel', 'OK'];
        }

         var data = navigator.notification.confirm(
                        alert_msg,      // message
                        onConfirm,      // callback
                        title,          // title
                        buttonsArray    // buttonsArray
                    );

         deferred.resolve(data);
         return deferred.promise;
      }
  }
}

CONSOLE OUTPUT

> Confirm: undefined (BEFORE user pressed the button)

> Callback function called!!! (AFTER user pressed the button)

Example plunker: plnkr.co/edit/VfqJkJO2n7FFLWoTO2Bp

blacksoul
– blacksoul

2013-12-14 18:27:06 +00:00
Commented Dec 14, 2013 at 18:27 — blacksoul
– blacksoul, Commented Dec 14, 2013 at 18:27

Jeff Hubbard · Accepted Answer · 2013-12-14 17:57:09Z

2

The problem is you're resolving the promise before the data has actually come back. You need to give your onConfirm function access to the promise that NotificationService.confirm is handing back, and only call resolve inside there.

answered Dec 14, 2013 at 17:57

Jeff Hubbard

9,9123 gold badges33 silver badges29 bronze badges

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

Comments

Hylianpuffball · Accepted Answer · 2013-12-14 19:08:04Z

$q works by letting methods have a reference to an answer that may not exist yet, and letting them register callbacks to be run when the answer is done. That means that if you call defer() in the same code block as resolve(), you're not really using the promise asynchronously, since you resolve it immediately after it was made.

You need to remnove deferred.resolve(data) from your confirm function block, and put it in your callback function instead. resolve() should always go in a callback function of some sort, because callback functions are how you wait for an asynchronous event. If you can resolve a promise in the getter, then it's not really asynchronous!

Then, change your onConfirm method to look like this:

var onConfirm = function(button) {
  console.log('Callback function called!!!');
  var result= false;

  // if(button == 1)    default case

  if(button == 2)  { result = true; }
  else if(button == 3)  { result = 3; }

  // else               default case

 deferred.resolve(result);
};

Now, we don't resolve the promise until we're in the notificaiton callback, which means the user has made their selection, and we resolve it with the user's decision.

Finally, you'll notice that if onConfirm is outside of your service, it won't have access to the deferred object it needs to resolve. Move onConfirm into your confirm function so it will have closure access to that variable.

Maxim Shoustin · Accepted Answer · 2013-12-14 19:16:40Z

0

The problem is NotificationService.confirm("Do you want to confirm?", 'Yes!'); returns promise (a.e. async).

So it should be something like:

var confirm = NotificationService.confirm("Do you want to confirm?", 'Yes!');

// now confirm is a promise
confirm.then(function (result) {
            console.log('Confirm: ' + confirm);

            if(confirm)   $location.path('/round/actual');                                    
                    }, function (result) {
                        alert("Error: No data returned");
                    })

Only for demo we can use $timeout to simulate async call:

app.factory('NotificationService', function($q,$timeout) {

  // Callback function
  var onConfirm = function(button) {

    var state;

    console.log('Callback function called!!!');
    if(button == 1)       state = 'working!';
    else                  state = false; // dismissed without press button

    return state;
  };


  var factory =  {
     confirm : function(alert_msg, title, buttonsArray) {

       var deferred = $q.defer();

      $timeout(function () {
         var state =  onConfirm(1); // simulate call callback after 3 sec
         deferred.resolve(state);
       }, 3000);

       return deferred.promise;
      }
  }
  return factory;
});

Demo Plunker

In your case, since navigator.notification.confirm uses callback so you can try to return resolve from callback.

edited Dec 14, 2013 at 19:16

answered Dec 14, 2013 at 13:00

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

4 Comments

blacksoul Over a year ago

It's almost done, but it's unfinished yet. I mean, if I do a console.log(result) the output is UNDEFINED yet because the execution is not being "paused" until user press a button. I updated the ask with the code

Maxim Shoustin Over a year ago

Hmm, in Plunker, the data is single method but it should be some value like array or model that you get by async way

blacksoul Over a year ago

I can't add the navigator.notification because it's from Cordova.js and it does not work here. Cause of that I let that function. You can modify with anything simple to test. Thanks you for your time!

Maxim Shoustin Over a year ago

see my edit i posted, i saw in docs of phonegap that navigator.notification uses callback only

Collectives™ on Stack Overflow

AngularJS and an async function inside of a service

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related