How to pass form data from angular ui bootstrap modal to view

Question

I\'m creating a webapp and I want to implement an option to add friends. I\'ve created the add friend page as a modal with a text input field. I want to test this by display

Answer 1

Resolve - plunkr

You could make use of modalInstance's resolve property; this acts as the link between the modal instance and the parent controller.

You inject the object in to the ModalInstanceController, and assign it to the scope of your modal instance.

UI Bootstraps resolve works exactly the same as ngRouter's; as such if for whatever reason resolve cannot resolve an object, the modal will not open.

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    user: function() {
      return $scope.user;
    }
  }
});

Scope - plunkr

An alternative, and arguably simpler method would be to pass in the parents scope in to the modal. Note that currently this doesn't work when using controllerAs syntax on the parent controller.

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  scope: $scope
});

Answer 2

I would suggest using the promise from the result to set the value to your controller's variables instead. The "resolve" from my understanding is for passing controller's variable to the dialog for using inside the dialog, not to be changed directly. In your code example, passing result you set in $modalInstance.close() to modalInstance.result.then() will do the trick. In other words, changing line #18 and #19 to the following,

modalInstance.result.then(function (data) {
$scope.user.name = data;

To improve the code a bit, you can actually pass the entire user object to allow adding additional attributes such as email, address, etc. to your user object easily. I had create an example at http://plnkr.co/edit/oztYRNrCRlF1Pw289i1M?p=preview.