javascript - Ng-Click 未被触发

Question

我制作了一个在多个部分 View 中使用的代码片段。从所有观点来看，除了一种观点之外，它似乎都有效。这个特定的部分 View 没有什么特别的，每个 View 上的代码片段都是相同的。

但是，我没有看到什么吗？

真正的问题:

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点击方法:

片段:

<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">&times;</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">&times;</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>

Answer 1

您应该在表单上使用 ng-submit，而不是 ng-click 提交按钮 (doc here):

<form role="form" action="adresboek.php" method="POST" id="new_noteform" ng-submit="submitNewNoteForm($event)">

在你的 Controller 中，你不需要监听提交事件，它由 Angular 和 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);
        }
    });
}