Ad

Resolve Doesnt Work In Angular Ui Modal

I am trying to show a modal using angular bootstrap ui which resolves items in controller. The problem is I am not able to get those resolved items in modal controller.

$scope.showItemsInBill = function(bill){
  var modalInstance = $uibModal.open({
    animation: $scope.anismationsEnabled,
    resolve: {
      items: function(){
        var items = [];
        BillingService.getItemsInBill(bill).then(function(response){
          console.log(response);
          return response;
        });
      }
    },
    templateUrl: 'templates/showitems-modal.html',
    controller: 'ShowItemsModalCtrl',
    backdrop: 'static'
  });
}

The modal controller is as follows:

angular.controller('ShowItemsModalCtrl', ['$scope', '$uibModalInstance', 'BillingService', 'items', function ($scope, $uibModalInstance, BillingService, items) {

init();

function init(){
  console.log('Modal is initializing');
  console.log(items);
  $scope.items = items;
}

$scope.cancel = function () {
  $uibModalInstance.dismiss('cancel');
};

$scope.printBill = function(){
  console.log('printing bill');
}

}]);

I get the response in console is :

history-controller.js:24 [Object]0: Objectlength: 1__proto__: Array[0]

showitems-modal-controller.js:8 Modal is initializing

showitems-modal-controller.js:9 undefined

So what I understand from here is that the success callback from service is called but it is not resolved into the modal controller but the modal controller is initialized. Why is this happening?

Is it because I am returning response from the success callback. If so what can I do in the situation?

Ad

Answer

You need to return the promise in the resolve

resolve: {
  items: function(){
    var items = [];
    // missing "return"
    return   BillingService.getItemsInBill(bill).then(function(response){
      console.log(response);
      return response;
    });
  }
},
Ad
source: stackoverflow.com
Ad