How to pass result from modal angular -ui-bootstrap to parent without closing?

Question

according to https://angular-ui.imtqy.com/bootstrap/#/modal , I want to pass the result from modal to parent without closing, but in the sample code they only show the result for the parent through closing

$uibModalInstance.close($scope.selected.item); 

I want to pass data to parents when the element is clicked, but I do not know how to do it. I really need some help. Thanks.

Answer 1

This is a fairly common communication problem between controllers, because you do not want to close the model and want to transfer data to another controller.

The fastest way to your problem is to use $broadcast . In your modal controller write like this:

 // Make sure to use $rootScope $rootScope.$broadcast("modalDataEventFoo", {selectedItem: $scope.selected.item}); 

Now, in your parent controller:

 $scope.$on("modalDataEventFoo", function(data) { console.log("got the data from modal", data.selectedItem); }); 

Other links for communication between controllers:

• What is the correct way to communicate between controllers in AngularJS?
• https://egghead.io/lessons/angularjs-sharing-data-between-controllers
• http://www.angulartutorial.net/2014/03/communicate-with-controllers-in-angular.html
• Communication between controllers in Angular

Answer 2

Another way is to share the area between the parent controller and the modal controller, declaring the scope property in the parameters:

 var modalInstance = $uibModal.open({ animation: $scope.animationsEnabled, templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: size, scope: $scope, resolve: { items: function () { return $scope.items; } } }); 

Check out this plunker in which the modal contains the input element associated with the variable $scope.shared.name : http://plnkr.co/edit/4xiEXATxAnvDKBSXxzQd