How to pass data into an angular.js UI bootstrap modal controller

Question

Using Angular.js UI bootstrap modal, how can I pass data into a modal popup's controller? I am currently trying:

var modalInstance = $modal.open({
    templateUrl: 'partials/confirmation-modal.html',
    controller: 'confirmationModal',
    resolve: {
        foo: function() { return 'bar'; }
    },
    backdrop: 'static',
    keyboard: true
});

The controller confirmationModal is:

    (function(_name) {
        /**
         * @ngInject
         */
        function _controller($scope, foo) {
            console.log(foo);  
        }

        angular
            .module('myApp')
            .controller(_name, _controller);
    })('confirmationModal');

But this errors with:

Unknown provider: fooProvider

Tong Shen · Accepted Answer · 2014-08-28 23:31:06Z

1

You can try to define the "confirmationModal" controller with angular.module('app').controller(...) instead.

If you want to use a string to refer to a controller, you need to register it to an angular module.

So, you have two ways to make it work:

1.Use string

In modal settings:

controller: "confirmationModal"

In controller definition (assume "app" is your module name):

angular.module('app').controller("confirmationModal", function($scope, foo) {
    console.log(foo);
});

2.Use function itself

In modal settings:

controller: confirmationModal

In controller definition:

var confirmationModal = function($scope, foo) {
    console.log(foo);
}

Can you tell the difference?

edited Aug 28, 2014 at 23:31

answered Aug 28, 2014 at 23:14

Tong Shen

1,3669 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Justin Over a year ago

When I try: controller: confirmationModal I am getting: confirmationModal is not defined.

Justin Over a year ago

Found my problem. I was setting the controller to use in both the modal options, and in the template itself with ng-controller. That was really hard to spot.

Collectives™ on Stack Overflow

How to pass data into an angular.js UI bootstrap modal controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related