当单击表单提交时关闭模式

My modal holds a form and I want to close the modal when the user clicks the submit button. The simplified form looks like this:

我的模式持有一个表单，我想在用户单击submit按钮时关闭模式。简化形式如下:

<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
    <div class='modal-content'>
        <form ng-submit='submitModule(module)'>
            <div class='modal-body'>
                ...
            </div>
            <div class='modal-footer'>
                <button type='submit' class='btn btn-primary'>Run</button>
                <button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
            </div>
        </form>
    </div>
</div>

You can see the two buttons. The close button uses data-dismiss='modal' which works fine. But I can't use that on the submit button, because that "cancels" out the ng-submit=submitModule() submission function; the modal will close but the function won't get called.

你可以看到两个按钮。关闭按钮使用数据-解散='modal'，这很好。但是我不能在submit按钮上使用它，因为它“取消”了ng-submit=submitModule()提交函数;模态函数会关闭，但函数不会被调用。

Would the solution be to close the modal from the submitModule() function? But how can I get a hold of the modal from there?

解决方案是关闭submitModule()函数的模态吗?但是我怎么能从那里得到模态呢?

3 个解决方案

#1

You can append as many method calls to the (ngSubmit) i.e

您可以向(ngSubmit)(即ngSubmit)添加许多方法调用。

form class="well" (ngSubmit)="addUserModal.hide(); addUser(model); userForm.reset()" #userForm="ngForm"

形式类=“嗯”(ngSubmit)= " addUserModal.hide();addUser(模型);userForm.reset()# userForm = " ngForm "

#2

You can add one small jQuery code in your HTML file... Add onclick attribute in button.

您可以在HTML文件中添加一个小jQuery代码……在按钮中添加onclick属性。

<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
    <form ng-submit='submitModule(module)'>
        <div class='modal-body'>
            ...
        </div>
        <div class='modal-footer'>
            <button type='submit' class='btn btn-primary' onclick="$('.modal').modal('hide')">Run</button>
            <button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
        </div>
    </form>
</div>

#3

Use the Angular-UI library - Modal: download minified version here:

使用Angular-UI库- Modal:下载缩小版这里:

First include the library in your module:

首先在模块中包含库:

angular.module('myModule', ['ui.bootstrap']);

Then, in your controller, you can close the modal within the form submit function:

然后，在您的控制器中，您可以关闭表单提交函数中的模态:

$scope.submitModule = function(module) {
    dialog.close(result);
    // REST OF YOUR CODE TO HANDLE FORM INPUT
}

#1