Question

I am using angular 1.3 with strap modal dialog and the form inside it.
There are 2 buttons: OK and Cancel. 
Cancel works as expected - it closes the modal. 
But on OK the dialog is not closed; however, the form is processed as expected.
The code below shows the model and the code which instantiates the modal dialog.
I am using button type=submit on OK to process the form. 
The $modal.showTemplate has 2 parameters: 
 1) HTML (code below) 
 2) callback which shall know which button was used: OK or Cancel. 

For some reason, this callback is invoked only on Cancel. 
I tried to fix it by using  ng-click="$close(true) on OK button 
instead type=submit but it does not help.
Question: how to close the modal dialog on OK?

<div class="modal"  tabindex="-1" role="dialog">
 <div class="modal-dialog ">
  <div class="modal-content">
   <div ng-controller="externalController">
     <form
            role="form"
            name="detailForm"
            ng-submit="submit()" 
     >
     <div ng-controller="internalController">
         ... some form fields are here ...
        <button class="btn" ng-click="$close(false)">
                  Cancel
        </button>
        <button class="btn"  type="submit">
                  OK
        </button>  
     </div>
    </div>  
   </form>
   </div>
  </div>
 </div>

<!-- invoking the modal defined above: -->

$modal.showTemplate(htmlTemplate,
 function(confirm) {
    console.log("callback confirm="+confirm);
    if (confirm === true) {
       console.log(" this point never achieved ... and modal dialog is not closed");
    } else {
       console.log(" this works as expected and modal dialog is closed");
    }
  },

);

Answer 1

删除“＆＃39;确定”提交类型。按钮。将ng-click指令附加到同一个＆＃39; OK＆＃39;按钮。点击您的按钮将通过＆＃39; [externalController] .submit（）＆＃39;提交表单。如果submit（）返回一个promise然后等待它，否则调用模态控制器＆＃39; close（）＆＃39;;

 <button class="btn"  ng-click="functionThatSubmitsAndCloses()">
              OK
    </button>

在您的内部控制器中＆＃39;您将在您的范围内定义该功能

$scope.functionThatSubmitsAndCloses = function () {
    [scope of externalController].submit();
    $close(true); // close being defined on the instance of your modal's controller and not this internal controller.
}

这是角带的旧版本吗？我没有在他们的API中看到showTemplate。

如何在提交时关闭角形带模式与表格

1 个答案: