Passing parameters to modal dialog

Question

I'm trying to use a simple modal dialog for editing an item in a list in the context of an Angular app. For modals I'm using UI-Bootstrap (AngularUI), which I know has still issues with Bootstrap 3 but AFAIK can be used for modals with some simple workarounds (unless building the not-yet-released branch of AngularUI). I created a simple repro Plunker here:

http://plnkr.co/edit/MWa3bLMqIkwxmxQ6YDSl

The sample code has a couple of controllers, one with an open method which should open the modal, and another with save and close methods for buttons save and cancel. Also, the CSS contains some workarounds for dealing with AngularUI issues with Bootstrap 3. The modal dialog is displayed, but it does not receive the parameter passed from the calling controller. To pass this parameter (a dummy item object with an id and a name) I use the resolve option in the modal open method call, like:

resolve: {
  item: function() {
    return angular.copy(item);
  }
}

Yet, the item parameter which should be resolved in the dialog controller appears to be undefined. What I'm missing here? Thanks!

Answer 1

You need to inject the item in controller injection:

You have this:

ItemDialogController.$inject = ["$scope", "$modalInstance"];

Change to:

 ItemDialogController.$inject = ["$scope", "$modalInstance", "item"];