getting data from angular modal service - angularjs

Question

First type questioner, long time reader. Newbie to Angular.
I am trying to create a popup modal for expanding a text box. (If you have ever dealt with Access, think shift F2). So, I have a form with multiple text boxes which utilize ng-model for two-way binding. I want to open a modal with a <textarea> so the user can type (and see) more than a simple text box.
Currently the data that is bound to each field will open correctly into the textarea on the popup (Passing data TO the modal). However, how do I get the data back to my original form and into the correct field?
mainForm.cshtml
<div class="col-md-4">
<button type="button" ng-click="openTextEditor(vm.firstName)">First Name</button>
<input class="form-control" type="text" name="firstName" ng-class="{'edited':vm.firstName}" ng-model="vm.firstName">
</div>
<div class="col-md-4">
<button type="button" ng-click="openTextEditor(vm.middleName)">Middle Name</button>
<input class="form-control" type="text" name="middleName" ng-class="{'edited':vm.middleName}" ng-model="vm.middleName">
</div>
<div class="col-md-4">
<button type="button" ng-click="openTextEditor(vm.lastName)">Last Name</button>
<input class="form-control" type="text" name="lastName" ng-class="{'edited':vm.lastName}" ng-model="vm.lastName">
</div>
mainForm.js
$scope.openTextEditor = function(textValue) {
$uibModal.open({
templateUrl: '~/textEditorModal.cshtml',
controller: 'textEditorModal as vm',
backdrop: 'static',
resolve: {
textValue: function() {
return textValue;
}
}
});
};
textEditorModal.cshtml
<div>
<div class="modal-header">
<h4 class="modal-title">
</h4>
</div>
<div class="modal-body">
<div busy-if="vm.loading">
<form name="textEditor">
<div class="input-group margin-bottom-10">
<textarea id="textBox" type="text" class="form-control" cols="25" rows="7" placeholder="Type text here...." ng-model="vm.textValue" enter-key="vm.saveModal()"></textarea>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" ng-disabled="vm.saving" class="btn btn-default" ng-click="vm.cancelModal()">Cancel</button>
<button type="submit" button-busy="vm.saving" class="btn btn-primary blue" ng-click="vm.saveModal()" ng-disabled="textEditor.$invalid"><i class="fa fa-save"></i> <span>Save</span></button>
</div>
</div>
textEditorModal.js
appModule.controller('common.views.common.textEditorModal', [
'$scope', '$uibModalInstance', 'textValue',
function($scope, $uibModalInstance, textValue) {
var vm = this;
vm.loading = false;
vm.textValue = textValue;
vm.cancelModal = function() {
$uibModalInstance.dismiss();
};
vm.saveModal = function() {
vm.saving = true;
$uibModalInstance.close(vm.textValue);
};
}
]);
Many thanks in advance!

Answer 1

You are almost there! In mainForm.js:
$scope.openTextEditor = function(textValue) {
var modalInstance = $uibModal.open({
templateUrl: '~/textEditorModal.cshtml',
controller: 'textEditorModal as vm',
backdrop: 'static',
resolve: {
textValue: function() {
return textValue;
}
}
});
modalInstance.result.then(function (savedText) {
// when the modal is dismissed with the save button
// do your thing with savedText
}, function () {
// when the modal is dismissed with the cancel button
console.log('Modal dismissed at: ' + new Date());
});
};

Answer 2

In mainForm.js, declare the callback function to get the result :
$scope.openTextEditor = function(textValue) {
$uibModal.open({
templateUrl: '~/textEditorModal.cshtml',
controller: 'textEditorModal as vm',
backdrop: 'static',
resolve: {
textValue: function() {
return textValue;
}
}
})
.result.then(function(returnedInput) {
// here is the problem
});
};
The remaining problem is the param in the openTextEditor function.
You should have a way to set a new value to the input in the original form but as you transmit in the function a string value, it will be more complicated to modify the value.
You should transmit in the openTextEditor function a parameter which allows to retrieve the property to value and not only the value of the property.
For example, you could transmit only the property name in the ng-click function :
<div class="col-md-4">
<button type="button" ng-click="openTextEditor('firstName)">First Name</button>
<input class="form-control" type="text" name="firstName" ng-class="{'edited':vm.firstName}" ng-model="vm.firstName">
</div>
And in the JS side, you could use the property name like that :
$scope.openTextEditor = function(propertyName) {
$uibModal.open({
templateUrl: '~/textEditorModal.cshtml',
controller: 'textEditorModal as vm',
backdrop: 'static',
resolve: {
propertyName: function() {
return propertyName;
}
}
})
.result.then(function(returnedInput) {
vm[propertyName]=returnedInput;
});
};
In this way, you use the property name in the modal dialog to give a label to the input and a way to fill the input in the original form.