Question

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

有两个类似的问题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();
            }
        });

用户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>

我没有创建一个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，您会看到＆＃34;此指令会创建新范围。＆＃34;。这意味着当您使用ng-include 时，密码详细信息正在查看控制器的子范围。您可以通过在模型前添加$parent来告诉您的子模型查看父作用域。

类似于$parent.modelName。

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

2 个答案: