2017-01-01 45 views
0

未保存的更改,我需要一個解決方案來警告有關在主 - 詳細情況未保存的更改。我能夠實施Sam於2015年9月創建的解決方案(http://www.samjhill.com/blog/?p=525#comment-28558)。這是爲了響應鏈接上的一個計算器問題和答案,Detect Unsaved changes and alert user using angularjsAngularjs - 警告在主從場景

薩姆提供的解決方案的偉大工程同在HTML文件中的單一形式,但我在一個情況下,我有了問題,我有一個標題部分和細節部分,在那裏既可以改變多種形式。在細節部分,我使用可編輯表格。我已經嘗試在兩個表單中添加「確認退出」屬性。在頂部的部分,確認框會按預期出現,但即使在我提交更新後仍會繼續出現。在xeditable部分,確認框永遠不會出現。我已經在下面包含了我的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 
+0

ngForm:「形式指令可嵌套別名HTML不允許形式元素的嵌套是嵌套的形式是有用的,例如如果需要確定子組的控制的有效性。」。 https://docs.angularjs.org/api/ng/directive/ngForm –

+0

將rowform更改爲ngForm搞糟了xeditable表,所以我不得不改回它。將buttonQuestionAnswer表單更改爲ngForm沒有影響,無論好壞。對我可能做出的其他更改有何建議? –

回答

1

由於我不知道HTML嵌套表單元素有問題,這是一個很好的提示。我刪除了按鈕表單,並創建了表頭的創建/更新/刪除按鈕部分。然後我將表單名稱傳遞給函數來創建,更新和刪除記錄。在函數中我添加了代碼: myForm。$ setPristine(true); myForm。$ setSubmitted(true); myForm。$ setDirty(false); 在xeditable形式中,我還將主窗體的名稱傳遞給onbeforesave ='changeAnswers(headerForm)'。在changeAnswers函數中,我添加了代碼: myForm。$ setDirty(true);

到目前爲止工作得很好。