javascript - 在表单 ngsubmit 上触发模式？

Question

我在表单中有一个输入和一个按钮。

我想输入内容并按回车键，提交输入内容并触发模式打开，显示结果。我不知道如何在 ng-submit 上触发模式而不需要自定义/hacky。有一个可以理解的方法吗？

目前:

<form>
    <div ng-show="thirdPhase" class="input-group animated fadeIn">
        <input type="text" class="form-control finderBar" placeholder="City, State..." autofocus>
        <span class="input-group-btn">
            <button data-toggle="modal" data-target="#searchModal" class="btn btn-default" type="button">Go!</button>
        </span>
    </div>
</form>

和模态:

<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Search Results</h4>
      </div>
      <div class="modal-body">
        TEST SEARCH MODAL
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我尝试将典型的模态触发器属性放入表单元素中，但是只要单击表单内的输入，就会触发模态。

Answer 1

因此，假设您不希望弹出模式的特殊按钮，而只是 ngSubmit 来引导(并且不会变得 hacky)，您需要将 html 修改为类似这样的内容，

    <div ng-controller="whateverYouWant" data-target="#searchModal" data-toggle="modal">
        <form ng-submit="submit()">
            <div ng-show="thirdPhase" class="input-group animated fadeIn">
                <input type="text" class="form-control 
finderBar" placeholder="City, State..." autofocus>
                <span class="input-group-btn">
                </span>
            </div>
        </form>
    </div>

通知我删除了<button>从 HTML 中输入 data-target和data-modal在<div>有 ng-controller。

最后将您的脚本修改为如下所示:

$scope.submit = function (){
 .
 . 
 .
 $('#searchModal').modal('show');
}

有了这个，当 ng-submit 完成其任务时，它会自动初始化模式，您可以使用 ng-modal绑定(bind)数据。

结账 Modals .