Resolve dependency from service in calling $modal dialog using angular-bootstrap

Question

I have a angular-bootstrap modal dialog set up as such:

            var modalInstance = $modal.open({
            templateUrl: '/views/core/common/modalProjectChange.html',  
            controller: ModalChooseProjectCtrl,
            resolve: {
                items: function () {
                    ProjectConfigurationService.getAll("", function (_prjl) {
                        return _prjl;
                    });
                }
            ...
        });

where

  var ModalChooseProjectCtrl = function ($scope, $modalInstance, items) {  

        console.log('called ModalChoose, items' + items);
        angular.forEach(items, function (value, key) {
            // do stuff...
        });
      }

and despite items function is performing ok (I can see network connection from invoked ProjectConfigurationService which receives an array), the line 'called ModalChoose, items' + items prints that items is undefined. Please help me understand why.

score 2 · Accepted Answer · answered Mar 21 '14 at 14:38

You are not returning anything from the resolve function (!). The result of the items function is injected to a modal and since you are not returning anything nothing gets injected. If you are working with async API you can return a promise and modal will be injected with a value of promise resolution.

In short: you need to return something in your resolve function:

resolve: {
                items: function () {

                    //RETRUN missing here
                    return ProjectConfigurationService.getAll("", function (_prjl) {
                        return _prjl;
                    });
                }
            ...

In your case it looks like you are using an async API so you need to make sure that your service works with promises (getAll should return a promise, callbacks won't work here).

Resolve dependency from service in calling $modal dialog using angular-bootstrap

1 Answers1