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
});