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

我正在使用Dan Wahlin's模态服务并使其正常运行，但是，如果我更改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();
            }
        });

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>

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

最佳答案

您可以使用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

关于javascript - 在Angular模态服务中从模态主体模板返回数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28972492/