Angularjs - マスターディテールのシナリオで未保存の変更について警告する

Question

マスターディテールのシナリオで保存されていない変更について警告するソリューションが必要です。 2015年9月に作成したサムのソリューションを実装できました（http://www.samjhill.com/blog/?p=525#comment-28558）。これは、リンクのstackoverflowの質問と回答に対応して、Detect Unsaved changes and alert user using angularjsでした。

サムが提供するソリューションは、htmlファイルの単一のフォームでうまく動作しますが、私はヘッダーセクションとディテールセクションに複数のフォームがある状況で問題が発生しています。詳細のセクションで私はxeditableテーブルを使用しています。私は両方のフォームに「confirm-on-exit」属性を追加しようとしました。一番上のセクションでは、確認のためのボックスが期待どおりに表示されますが、更新のために送信しても引き続き表示されます。 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 

Answer 1

HTMLにネストされたフォーム要素に問題があることを知らなかったので、これは良いヒントでした。私はボタンフォームを削除し、ヘッダフォームのCreate/Update/Deleteボタン部分を作成しました。その後、フォーム名を関数に渡して、レコードの作成、更新、削除を行いました。関数で私はコードを追加しました： myForm。$ setPristine（true）; myForm。$ setSubmitted（true）; myForm。$ setDirty（false）; xeditable形式では、私はmainフォームの名前をonbeforesave = 'changeAnswers（headerForm）'に渡しました。 changeAnswers関数では、コードを追加しました： myForm。$ setDirty（true）;

これまでのところ非常にうまくいっています。