我制作了一个代码片段，我在多个部分视图中使用它。在所有观点中，除了一个外，它似乎有效。这个特定的局部视图没有什么特别之处，每个视图的代码片段都是相同的。
但是，我没有看到什么？
真正的问题：
Ng-单击表单提交不会被触发。但是提交了表格。
$scope.submitNewNoteForm = function () {
alert("HI");
$("#new_noteform").on("submit", function (e) {
alert("yo");
var formObj = $("#new_noteform");
var formURL = formObj.attr("action");
var formData = new FormData(this);
$.ajax({
url: formURL,
type: 'POST',
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function (data, textStatus, jqXHR)
{
$('#new_noteform')[0].reset();
$('#new_note').modal('toggle');
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(textStatus);
}
});
//Prevent Default action.
e.preventDefault();
e.unbind();
}
);
};
Ng-Click方法：
段：
<div class="card-body card-padding " ng-controller="NoteListCtrl" id="noteslist">
<div class="row">
<div class="col-sm-12 actionBar">
<div class="fg-line form-group">
<input class="form-control ng-pristine ng-untouched ng-valid ng-empty" ng-model="notesearch" type="text" placeholder="Zoek in notities">
</div>
</div>
</div>
<div >
<div class="contactperson" ng-repeat="note in allnotes| filter : notesearch" ng-click="getNoteByID(note.id)" data-toggle="modal" data-target="#view_note">
{{note.title}}
</div>
</div>
<div class="modal fade bs-example-modal-lg" id="view_note" tabindex="-1" role="dialog" aria-labelledby="view_note">
<div class="modal-dialog modal-lg">
<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="myModalLabel">{{selnote.title}}</h4>
</div>
<form role="form" action="index.php" method="POST">
<div class="container">
<p ng-bind-html="SkipValidation(selnote.content)"></p>
</div>
<center>
<button type="button" class="btn btn-default btn-sm m-10" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success btn-sm hec-save waves-effect m-10" name="save_alert">Save</button>
</center>
</form>
</div>
</div>
</div>
<div class="modal fade bs-example-modal-lg" id="new_note" tabindex="-1" role="dialog" aria-labelledby="new_note" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<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="myModalLabel">Nieuwe notitie</h4>
</div>
<form role="form" action="adresboek.php" method="POST" id="new_noteform" >
<input type="hidden" name="ref_id" value="{{letter.id}}"/>
<input type="hidden" name="level" value="3"/>
<div class="container">
<div class="fg-line form-group">
<input type="text" name="title" placeholder="Titel"/>
</div>
<div class="form-inline">
<div class="form-group">
<label class="radio-inline"><strong>Urgentie</strong></label>
<label class="radio-inline">
<input name="sampleinlineradio" value="1" type="radio" name="urgency">
!</label>
<label class="radio-inline">
<input name="sampleinlineradio" value="2" type="radio" name="urgency">
!!</label>
<label class="radio-inline">
<input name="sampleinlineradio" value="3" type="radio" name="urgency">
!!!</label>
</div>
</div>
</div>
<textarea class="form-control html-editor" name="content" style="resize:none;"></textarea>
<center>
<button type="button" class="btn btn-default btn-sm m-10" data-dismiss="modal">Cancel</button>
<input type="hidden" name="save_note" value=""/>
<button type="submit" ng-click="submitNewNoteForm()" class="btn btn-success btn-sm hec-save waves-effect m-10" >Opslaan</button>
</center>
</form>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
您应该在表单上使用ng-submit而不是点击提交按钮（doc here）：
<form role="form" action="adresboek.php" method="POST" id="new_noteform" ng-submit="submitNewNoteForm($event)">
在你的控制器中，你不需要听提交事件，它是由角度和你的函数在ng-submit中处理的：
$scope.submitNewNoteForm = function (e) {
// To put at the top level
e.preventDefault();
alert("yo");
var formObj = $("#new_noteform");
var formURL = formObj.attr("action");
var formData = new FormData(this);
$.ajax({
url: formURL,
type: 'POST',
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function (data, textStatus, jqXHR)
{
$('#new_noteform')[0].reset();
$('#new_note').modal('toggle');
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(textStatus);
}
});
}