Angularjs ui bootstrap modal doesn't work without resolve option

Question

I have created a reusable component but I keep getting issue if I don't pass resolve, what is wrong here.. thanks

$scope.open = function () {
             var modalInstance = $modal.open({
                templateUrl: '../../App/template/commentsModal.html',
                size: ''
                 ,
                controller: ModalInstanceCtrl,

                 resolve: {
                     items: function () {
                         return 'b';
                     }
                 }


             });

But if I remove resolve then I keep getting [$injector:unpr] Unknown provider: itemsProvider <- items

What is items is this something internal to angularjs? here is the modal controller:

.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close();
    };

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

})

items you must have listed as a dependency in the controller (though the pasted code doesn't seem like showing it), it is nothing but the name of the temporary service (items) that you have in the resolve. — PSL
– PSL, Commented Aug 7, 2014 at 19:54
.controller('ModalInstanceCtrl',function($scope,$modalInstance,items) — m.e.conroy
– m.e.conroy, Commented Aug 7, 2014 at 20:04
@PSL I intentionally left items out but I am still getting that error. without the resolve — AAF
– AAF, Commented Aug 7, 2014 at 20:11
@m.e.conroy I know if I add it in the controller header then it will give me error but in my case I am not and its still giving DI error. — AAF
– AAF, Commented Aug 7, 2014 at 20:11
Try making controller a string in your modal.open. controller: 'ModalInstanceCtrl' — m.e.conroy
– m.e.conroy, Commented Aug 7, 2014 at 20:15

jcc · Accepted Answer · 2014-08-07 20:24:34Z

You need to list items as one of your dependencies on the new controller, that is resolve's purpose.

$scope.open = function () {
         var modalInstance = $modal.open({
            templateUrl: '../../App/template/commentsModal.html',
            size: '',
            controller: ModalInstanceCtrl,
            resolve: {
                 items: function () {
                     return 'b';
                 }
             }
         });
         modalInstance.result.then(function(data) { //make sure you are declaring your promise
              confirm(data);
         });
};

You don't have to declare you controller as part of your module, you can simply make an object.

var ModalInstanceCtrl = function ($scope, $modalInstance, *items*) {
    $scope.items = items;

    $scope.ok = function () {
        $modalInstance.close($scope.items);
    };

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

});

Essentially, resolve will send items to your defined modal controller, assign it to that local scope, and then return it with the promise, back to your starting controller. You can see how you can take data, pass to the modal to be changed, and return the new result and rebind to your original controller. Make sure to declare your modal controller outside of your main controller and pass in anything else you need using this method.

Make sure you are declaring $modal in your main controller, and $modalInstance in your modal controller.

Collectives™ on Stack Overflow

Angularjs ui bootstrap modal doesn't work without resolve option

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related