I am fairly new to AngularJS and having a problem with returning data from a modal dialog service. Basically, I copied Dan Wahlin's service http://weblogs.asp.net/dwahlin/archive/2013/09/18/building-an-angularjs-modal-service.aspx and am calling it from my controller.
myApp.controller('MyController', function($scope, ModalService) {
window.scope = $scope;
$scope.mydata = {name: ""};
$scope.showModal = function () {
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Save',
headerText: 'Save Dialog'
}
ModalService.showModal({}, modalOptions).then(function (result) {
});
}
});
Then I have my partial like so:
<div class="modal-header">
<h3>{{modalOptions.headerText}}</h3>
</div>
<form ng-submit="modalOptions.submit()">
<div class="modal-body">
<label>Name</label>
<input type="text" data-ng-model="mydata.name">
</div>
<div class="modal-footer">
<button type="button" class="btn" data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
<button type="submit" class="btn btn-primary">{{modalOptions.actionButtonText}}</button>
</div>
This modal is being invoked like this:
<button class="btn btn-primary hidden pull-right" id="save" data-ng-click="showModal()">Save</button>
So my question is how do I get the value of the name field back to the controller? I've looked all over the web and all the examples have the function that opens the modal reside inside the controller, which makes it much easier as $scope from the controller also exists in the function that opens the modal.
I tried adding the following code to the 'show' function in the service but it did not work.
tempModalDefaults.resolve = function($scope) {
mydata = function () {
return $scope.mydata;
}
}
Thanks
P.S. I renamed modalService to ModalService in my code, so that's not a typo. The modal opens and closes as it should, I just can't pass the field's value back to the controller.
In your button, add data-ng-click="modalOptions.ok(mydata)"
<button type="submit" class="btn btn-primary" data-ng-click="modalOptions.ok(mydata)">{{modalOptions.actionButtonText}}</button>
And you can get it from:
ModalService.showModal({}, modalOptions).then(function (result) {
console.log(result.name);
});
If you want to use modalOptions.submit
function, you need to change your code a bit
In your HTML, pass the mydata
to modalOptions.submit
function:
<form ng-submit="modalOptions.submit(mydata)">
Your Model Service, replace in the show
function:
return $modal.open(tempModalDefaults); //remove the .result
Your controller:
$scope.showModal = function () {
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Save',
headerText: 'Save Dialog',
submit:function(result){
$modalInstance.close(result);
}
}
var $modalInstance = ModalService.showModal({}, modalOptions);
$modalInstance.result.then(function (result) {
console.log(result.name);
});
}