returning data from angularjs modal dialog service

Question

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.

Answer 1

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

DEMO

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

DEMO