javascript - 从 Angular 模态服务中的模态体模板返回数据

Question

我正在使用Dan Wahlin's模态服务并使其正常工作，但是如果我更改 modal.html 以在正文中包含部分模板，我不知道如何从模态“确定”中的模板获取模型数据单击结果。

有两个类似的问题here和 here ，但它们将模型数据放在模态表单中，而不是在单独的模板中。

我的想法是，我可以为结果数据提供一个模板 Controller ，但是如何从模态服务访问它并将其返回给调用 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();
            }
        });

用户密码.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>

我没有创建一个插件，因为上面的链接显示了相同的代码，除了我包含的 bodyTemplateUrl 之外。

Answer 1

您可以使用 ng-include onload 函数来定义一个变量，该变量将在模态和包含的 html 中可用:

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

然后将其发送到ok方法:

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

检查this plunker