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

Question

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

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

我的想法是我可以有一个用于结果数据的模板控制器，但是我将如何从模态服务访问它并将其返回给调用控制器？

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>

控制器：

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>

我没有创建 plunker，因为上面的链接显示了相同的代码，除了我包含的 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

Answer 2

如果您查看docs，您会看到上面写着“此指令创建新范围。”。这意味着当您使用 ng-include passwordDetails 时，正在查看控制器的子范围。您可以通过在您的模型前面加上 $parent 来告诉您的子模型查看父范围。

类似$parent.modelName。