Angularjs function call from another function and wait its response

Question

I've search for a sollution but I didn't find something like that.

I'm using angular, I want to call a function inside another function, and wait for its response.

the 2nd function is:

self.changeProvider = function() {

    var contexec = false;

    if (!checkIsFit()) {
      contexec = true;
    } else {
      contexec = false;
    }


  if (contexec) {
      var modalOptions = {
          closeButtonText: $translate.instant('closeButtonText'),
          actionButtonText: $translate.instant('ok'),
          headerText: $translate.instant('changeProvidertitle'),
          bodyTemplate: '../themes/default/src/app/shoppingCart/changeProvider/changeProvider.tpl.html',
          margin: true
      };


      var modalDefaults = {
          backdrop: 'static',
          templateUrl: '../themes/default/src/app/shoppingCart/changeProvider/changeProvider.tpl.html',
          controller: 'ChangeProviderCtrl',
          size: 'sm',
          resolve: {
              modalData: function() {
                  return {
                      data: $scope.arrayToChangeProvider
                  };
              }
          }
      };

      modalService.showModal(modalDefaults, modalOptions)
          .then(function(result) {
//some stuff
              });
          }
      };

And the other function:

  var checkIsFit = function() {

    if ( $scope.cabstatus != 4 ) {
      return false;
    } else {

            var modalOptions = {
            closeButtonText: $translate.instant('closeButtonText'),
            actionButtonText: $translate.instant('ok'),
            headerText: $translate.instant('cabisfittedtitle'),
            bodyTemplate: '../themes/default/src/app/shoppingCart/checkIsFit/checkIsFit.tpl.html',
            margin: true
           };


        var modalDefaults = {
            backdrop: 'static',
            templateUrl: '../themes/default/src/app/shoppingCart/checkIsFit/checkIsFit.tpl.html',
            controller: 'CheckIsFitCtrl',
            size: 'sm',
            resolve: {
                modalData: function() {
                    return {
                    };
                }
            }
        };

          modalService.showModal(modalDefaults, modalOptions)
            .then(function(result) {
              if (result.msg === 'ok') {

                var params = {
                  token: $scope.token,
                  fkidpedido: $scope.pendingOrderLineList[0].FK_IDPEDIDO,
                  userid : $scope.userid
                  };

                shoppingCartService.postResetAgr(params, function() {
                    return true;
                }, function() {
                    /*Notification.error({
                        message: $translate.instant('components.activity.actions.deleteActivityError')
                    });*/
                });
                return false;
              } else {
                return true;
              }
          });
      }
  };

The problem is the function changeProvider still executing and opens the modal first to resolve the funcion checkIsFit() I want to wait checkIsFit is resolved and then continue with the functions of changeProvider I cannot include the checkIsFit() functionallity inside changeProvider because I want to use checkIsFit() into another functions.

Any help will be appreciate.

Thanks in advance

Answer 1

The modalService.showmodal method returns a promise. Create functions that return those promises.

  var modalPromise1Fn = function () {
      var promise1 = 
          modalService.showModal(modalDefaults1, modalOptions2)
              .then(function(result) {
                  //some stuff
               });
      return promise1;
  };

  var modalPromise2Fn = function () {
      var promise2 = 
          modalService.showModal(modalDefaults2, modalOptions2)
              .then(function(result) {
                  //some stuff
               });
      return promise2;
  };

This use the .then method of the first promise to chain the second promise.

var derivedPromise = 
    modalPromise1Fn().then( function() {
        var promise2 = modalPromise2Fn();
        //return to chain the second promise
        return promise2;
   });

From the Docs:

Chaining promises

Because calling the .then method of a promise returns a new derived promise, it is easily possible to create a chain of promises.

It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs .

-- AngularJS $q Service API Reference -- Chaining Promises

Answer 2

I believe what you're looking for are deferred objects and promises. Check out the documentation for $q:

https://docs.angularjs.org/api/ng/service/$q

I'd recommend giving this a good read because this is a really important and powerful concept for ANY Javascript developer.

At the essence, deferred objects and promises allow you run asynchronous processes and callback to a function when a process is complete.