Angularjs - 마스터 세부 정보 시나리오의 저장되지 않은 변경 내용에 대한 경고

Question

마스터 - 세부 시나리오에서 저장되지 않은 변경 사항에 대한 경고 솔루션이 필요합니다. 2015 년 9 월에 만든 Sam의 솔루션을 구현할 수있었습니다 (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);

지금까지 아주 잘 작동했습니다.