Getting data from Modal in Bootstrap UI

Question

I've been aggressively working on an app that uses AngularJS and Bootstrap. To help, I've included the Bootstrap UI framework. I am successfully opening a dialog and closing the dialog. However, I'm not sure how to actually "get" the data when a user clicks "Save Item".

My Plunker is Here

As shown in the Plunker above, I have my controller defined like this:

 var modalInstance = $modal.open({ templateUrl: 'item-dialog.html', size: 'sm', controller: function($scope, $modalInstance) { $scope.saveItem = function () { alert('Saving...'); alert('ID: ' + $scope.newItem.typeId); alert('Data: ' + $scope.newItem.data); }; $scope.cancelItem = function() { $modalInstance.close(false); }; } });

When I go to show the id of the item the user selected, and the text the user entered, it doesn't work. newItem is undefined. However, in the markup, you can see ng-model="newItem.data"

How do I get the information that the user entered in my controller?

Thank you!

ms87 · Accepted Answer · 2014-09-19 14:43:09Z

You are not passing the result back to the controller opening the modal when you close it, you just need to add this in the modal's controller:

$modalInstance.close($scope.newItem);

See plunk.

Another thing: I've found that if you do not manually initialize objects on the $scope of the modal controllers of angular ui, they do not get bound properly, hence the $scope.newItem={} in the controller of the modal.

Collectives™ on Stack Overflow

Getting data from Modal in Bootstrap UI

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related