Currently, I am facing an issue with displaying a modal using Angular Bootstrap UI. The modal is supposed to resolve items in the controller, but I am struggling to access those resolved items in the 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 looks like this:
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');
}
}]);
When I check the response in the console, it shows:
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
From this, I understand that the success callback from the service is being called, but the response is not being resolved in the modal controller even though the modal controller is being initialized. What could be causing this issue?
Could it be due to me returning the response from the success callback? If so, what steps can I take to address this situation?