Returning data from modal body template in Angular modal service

Question

I'm using Dan Wahlin's modal service and got it working, however if I change modal.html to include a partial template in the body, I don't know how to get the model data from the template in the modal's 'ok' click result.

There are two similar questions here and here, but they have the model data inside the modal form, not in a separate template.

My thinking is that I could have a template controller for the result data, but then how would I access it from the modal service and return it to the calling controller?

modal.html:

<div class="inmodal">
<div class="modal-header">
    <h4 class="modal-title">{{modalOptions.headerText}}</h4>
</div>
<div class="modal-body">
    <div ng-include="modalOptions.bodyTemplateUrl" ></div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-white" data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
    <button class="btn btn-primary" data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
</div>

controller:

var modalOptions = {
            closeButtonText: 'Cancel',
            actionButtonText: 'Save',
            headerText: 'Modal Title',
            bodyText: 'Nicy body.',
            bodyTemplateUrl: 'modules/users/views/account/user-password.partial.html' 
        };
modalService.showModal({}, modalOptions).then(function (result) {
            console.log(result.currentPassword);
            if (result === 'ok') {
                $scope.changeUserPassword();
            }
        });

user-password.partial.html:

<div > <!-- PasswordController? -->
<form name="passwordForm" class=" form-horizontal" autocomplete="off">
    <fieldset>
        <div class="form-group">
            <input type="password" id="currentPassword" name="currentPassword" class="form-control" data-ng-model="passwordDetails.currentPassword" placeholder="Current password">
        </div>
        <div class="form-group">
            <input type="password" id="newPassword" name="newPassword" class="form-control" data-ng-model="passwordDetails.newPassword" placeholder="New password">
        </div>
        <div class="form-group">
            <input type="password" id="verifyPassword" name="verifyPassword" class="form-control" data-ng-model="passwordDetails.verifyPassword" placeholder="Verify password">
        </div>
    </fieldset>
</form>

I didn't create a plunker as the links above show the same code except for the bodyTemplateUrl that I've included.

Can you post the contents of your partial? – Scott Sword Mar 10 '15 at 19:58 — Scott Sword, Mar 10 '15 at 19:58

score 1 · Accepted Answer · answered Mar 11 '15 at 21:14

1

You could use ng-include onload function to define a variable which will be available in the modal and the included html:

<div ng-include="modalOptions.bodyTemplateUrl" onload="passwordDetails = {}"></div>

Then send it to the ok method:

<button type="submit" class="btn btn-primary" data-ng-click="modalOptions.ok(passwordDetails)">{{modalOptions.actionButtonText}}</button>

Check this plunker

answered Mar 11 '15 at 21:14

eladcon

5,815
1
16
19

That was the missing piece! I appreciate your time and the detailed plunker. – ceebreenk Mar 11 '15 at 21:27
This was very helpful. What I did, instead of using the ng-include, I built that content right into my version of modal.html. – eflat Feb 19 '16 at 00:16

score 0 · Answer 2 · answered Mar 10 '15 at 20:09

0

If you look at the docs you will see that is says "This directive creates new scope.". So that means when you use ng-include passwordDetails is looking at a child scope of your controller. You can tell your child models to look at the parent scope by prepending your model with $parent.

Something like $parent.modelName.

answered Mar 10 '15 at 20:09

Scott Sword

4,648
6
32
37

Ok, I understand the _new scope_ issue now, but I'm still not sure how I'd get that child scope model data to my modal controller's 'ok' result. Do you have a code snippet to help me understand? – ceebreenk Mar 10 '15 at 20:37

Returning data from modal body template in Angular modal service

2 Answers2