Angularjs - 警告未保存的主体细节方案

Question

我需要一个解决方案来警告主详细信息中未得救的更改。我能够实施SAM于2015年9月创建的解决方案（http://www.samjhill.com/blog/?p=525#comment-28558）。这是对链接上的stackoverflow问题和回答，检测未保存的更改并使用angularjs提醒用户。

SAM提供的解决方案在HTML文件中使用单个表单非常有效，但是在某种情况下，我在标头部分和详细部分中都有多个表格的情况下遇到问题，两者都可以更改。在"详细信息"部分中，我使用的是Xedable表。我尝试将"确认"属性添加到两种形式中。在顶部，确认框按预期出现，但即使我提交更新后，也会继续出现。在Xedable部分中，确认框永远不会出现。我在下面包括了我的HTML。您能否提出任何建议，以便如果对页面上的任何表格进行了更改，请发出警告？

.container.col-md-12.col-sm-12.col-xs-12-center
    .well
        form.form-horizontal(name="createQuestionAnswer" confirm-on-exit)
            fieldset
                legend Question Definition
                .form-group
                    label.col-md-2.control-label(for="statement") Question
                    .col-md-10
                        input.form-control(name="statement", type="text", placeholder="Statement", ng-model="statement", ng-change = "changeStatement()",required)
                .form-group
                    label.col-md-2.control-label(for="sequenceNo") SequenceNo
                    .col-md-4
                        input.form-control(name="sequenceNo", type="text", placeholder="SequenceNo", ng-model="sequenceNo", ng-change = "changeSequenceNo()",required)
                    label.col-md-2.control-label(for="componentType") Type
                    .col-md-4
                        input.form-control(name="componentType", type="text", placeholder="ComponentType", ng-model="componentType", ng-change = "changeComponentType()",required)
                .form-group
                    label.col-md-2.control-label(for="weight") Weight
                    .col-md-2
                        input.form-control(name="weight", type="text", placeholder="Weight", ng-model="weight", ng-change = "changeWeight()")
                    label.col-md-2.control-label(for="imageURL") Image
                    .col-md-6
                        input.form-control(name="imageURL", type="text", placeholder="Image", ng-model="imageURL", ng-change = "changeImageURL()", required)
    div(ng-app='app')
            table.table.table-bordered.table-hover.table-condensed(style='width: 100%')
                tr(style='font-weight: bold')
                    td(style='width:70%') Answer
                    td(style='width:10%') Correct
                    td(style='width:10%') Rank
                    td(style='width:10%') Position
                tr(ng-repeat='answer in answers')
                    td
                        // editable answer (text with validation)
                        span(editable-text='answer.answer',  e-name='answer', e-form='rowform', onbeforesave='checkAnswer($data)',onaftersave='saveAnswers($data)', e-required='') {{ answer.answer || 'empty'}}
                    td
                        // editable  (select-local)
                        span(editable-text='answer.correct', e-name='correct', e-form='rowform') {{ answer.correct }}
                    td
                        // editable
                        span(editable-text='answer.rank', e-name='rank', e-form='rowform' ) {{ answer.rank }}
                    td
                        // editable
                        span(editable-text='answer.position', e-name='position', e-form='rowform') {{ answer.position }}
                    td(style='white-space: nowrap')
                        // form
                        form.form-buttons.form-inline(editable-form='', name='rowform' onbeforesave='changeAnswers()', ng-show='rowform.$visible', shown='inserted == answer')
                            button.btn.btn-primary(type='submit', ng-disabled='rowform.$waiting') save
                            button.btn.btn-default(type='button', ng-disabled='rowform.$waiting', ng-click='rowform.$cancel()') cancel
                        .buttons(ng-show='!rowform.$visible')
                            button.btn.btn-primary(ng-click='rowform.$show()' ) edit
                            button.btn.btn-danger(ng-click='removeAnswer($index)') del
            button.btn.btn-default(ng-click='addAnswer()') Add row
form.form-horizontal(name="buttonQuestionAnswer")
    fieldset
        .form-group
            .col-md-10.col-md-offset-2
                .pull-right
                    button.btn.btn-primary(ng-controller="flQuestionCrudCtrl", ng-show="questionMode=='Create'",  ng-click="createQuestion()") Save New
                    |  
                    button.btn.btn-primary(ng-controller="flQuestionCrudCtrl", ng-show="questionMode=='Update'", ng-click="updateQuestion()") Update
                    |  
                    button.btn.btn-primary(ng-controller="flQuestionCrudCtrl", ng-show="questionMode=='Update'", ng-click="deleteQuestion()") Delete
                    |  
                    a.btn.btn-default(ui-sref="home") Cancel

Answer 1

我不知道html在嵌套形式元素上有问题，这是一个很好的提示。我删除了按钮表单，并使创建/更新/删除按钮部分是标题表单的一部分。然后，我将表单名称传递给函数以创建，更新和删除记录。在功能中，我添加了代码： myform。$ setpristine（true）; myform。$ setSubmitting（true）; myform。$ setDirty（false）;在Xededisitable的形式中，我还将主形式的名称传递给了onBeforesave ='ChangeAnswers（headerform）'。在ChangeAnswers函数中，我添加了代码： myform。$ setDirty（true）;

到目前为止工作得很好。