Question

我的模态包含一个表单，我想在用户单击提交按钮时关闭模式。简化形式如下所示：

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

您可以看到两个按钮。关闭按钮使用data-dismiss='modal'，工作正常。但我无法在提交按钮上使用它，因为＆＃34;取消＆＃34;退出ng-submit=submitModule()提交功能;模态将关闭，但函数不会被调用。

解决方案是关闭submitModule()函数的模态吗？但是我如何从那里获得模态呢？

Answer 1

您可以向（ngSubmit）附加尽可能多的方法调用，即

form class =＆＃34; well＆＃34; （ngSubmit）=＆＃34; addUserModal.hide（）; ADDUSER（模型）; userForm.reset（）＆＃34; #userForm =＆＃34; ngForm＆＃34;

Answer 2

您可以在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>

Answer 3

使用Angular-UI库 - 模态：下载缩小版here：

首先在模块中包含库：

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

然后，在您的控制器中，您可以在表单提交功能中关闭模式：

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

单击表单提交时关闭模式

3 个答案: