Geek Answers Handbook

Enter data from modal form into parent form in AngularJS?

I have a form with additional data fields displayed in modal mode:

<form class="form-horizontal" name="newForm" ng-controller="FormCtrl" ng-submit="submit()"> <label>Test</label> <div ng-controller="ModalCtrl"> <a class="btn btn-link" ng-click="open()">Open</a> <ng-include src="'partials/modal.html'"></ng-include> </div> </form>

includes:

 <div modal="shouldBeOpen" close="close()" options="opts"> <div class="modal-header"> <h4>I'm a modal!</h4> </div> <div class="modal-body"> <ul> <input type="text" tabindex="16" ng-model="someinput" name="someinput" size="32" class="validate[someinput]" /> </ul> </div> <div class="modal-footer"> <button class="btn btn-warning cancel" ng-click="close()">Cancel</button> </div> </div>

JS:

 var ModalCtrl = function ($scope) { $scope.open = function () { $scope.shouldBeOpen = true; }; $scope.close = function () { $scope.shouldBeOpen = false; }; $scope.opts = { backdropFade: true, dialogFade:true }; };

How can I read / paste / transfer user input from a modal form to the main form?

+4
source share
2 answers

I found a comment on a problem on GitHub using plunker explaining the problem, and a solution using angular -ui without general provision of services. It works like a charm.

http://plnkr.co/edit/ktfq0Y?p=preview

0
source

You need to establish a connection between the two controllers, and this can be achieved by creating a service.

Using this as a reference.

You can create a service as follows:

 angular.module('myApp', []) .service('sharedInput', function () { var modalInput = ""; return { getModalInput:function () { return modalInput; }, setModalInput:function (value) { modalInput = value; } }; });

Then, in your ModalCtrl() function, I assume that you will have a button for input. Say clicking this button calls the "submitInput" function in the ModalCtrl area. You will write this function as:

 $scope.submitInput = function() { sharedInput.setMOdalInput($scope.someinput); }

... and in your FormCtrl() you will write the following code to read modal input:

 var input = sharedInput.getModalInput()

You also need to pass the parameter "sharedInput" to ModalCtrl and FormCtrl in the same way you passed $ scope. And now you have two of your controllers.

+3
source

More articles:


All Articles