我需要帮助在提交时解除模态。我正在使用 angularJs 进行数据绑定，以及 Jquery 和引导程序（但不是 ui-bootstrap）

Posted 2023-02-19

【中文标题】我需要帮助在提交时解除模态。我正在使用 angularJs 进行数据绑定，以及 Jquery 和引导程序（但不是 ui-bootstrap）

【英文标题】：I need helping dismissing modal on submit. I am using angularJs for databinding, and Jquery and bootstrap (but not ui-bootstrap)

【发布时间】：2016-04-13 19:12:23

【问题描述】：

用于启动模式的按钮：

<button data-hover="tooltip" title="Edit" style="height:25px; width:35px" class="fa fa-pencil" data-toggle="modal" data-target=".eCategory-modal-sm" ng-click="budget.getCategory(category.Id)"></button>

html：

<div class="col-md-12 col-sm-12 col-xs-12">
<div>
    <div class="">
        <br />
        <div class="modal fade eCategory-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel2">Edit Budget </h4><small>Delete Previous Information and Enter New </small>
                    </div>
                    <div class="modal-body">
                        <form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left" ng-submit="budget.editCategory()">
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">Name</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <input type="text" class="form-control" ng-model="budget.cmodel.Name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">Expense/Income</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <select class="form-control" ng-model="budget.cmodel.ExpenseTF" ng-options="o.v as o.n for o in [n: 'Income', v: false, n: 'Expense', v: true]"></select>
                                </div>
                            </div>
                            <div class="ln_solid"></div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="this.form.reset()">Close</button>
                                </div>
                                <div class="col-md-6 ">
                                    <button type="submit" class="btn btn-success">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS：

 c.editCategory = function () 
    return $http.post(serviceBase + '/api/Category/Edit', c.cmodel).then(function (response) 
        c.cmodel = response.data;
        return response;
    );
;

另外，我看过很多这类问题的例子。大多数答案都有指令的东西。我的应用程序在指令中没有发生任何事情。我只使用角度控制器、服务（为了安全）和模板来加载视图。我是新手，所以我不确定应用程序的数据流到目前为止是如何工作的。但是，我确实知道，如果我将东西注入应用程序，我的安全性就会中断……这是由于令牌丢失造成的。所以请不要给我一个涉及我必须注入我的应用程序的解决方案。 PS。我已经尝试注入 Ui-Bootstrap 并使用他们的模态......但如果你有一个它不能工作不同的解决方案。如果您给我粘贴代码，请告诉我在哪里进行更改。

【参考方案1】：

关闭按钮如何关闭模式？ 答案：

    data-dismiss="modal"

解决你的问题：

    <button type="submit" data-dismiss="modal" class="btn btn-success">Submit</button>

那么便便......你有没有试过把 $('.modal').modal('hide');在你的 javascript 函数中？

c.editCategory = function () 
    return $http.post(serviceBase + '/api/Category/Edit', c.cmodel).then(function (response) 
        c.cmodel = response.data;
        $('.modal').modal('hide');
        return response;
    );
;

【讨论】：

这不起作用，因为如果我在提交时关闭模式，则不会发送表单。意味着用户输入不会更改/添加到数据库中。

隐藏模式也不起作用。 :\。有没有办法可能只是刷新状态或提交的东西？喜欢它提交...那么它只会刷新当前页面？