AngularJS: Modem związany z danymi - zapisz zmiany tylko wtedy, gdy klikniesz "Zapisz", lub zapomnij zmiany, jeśli klikniesz "Anuluj"

Question

Mam listę przedmiotów, a po kliknięciu jednego z elementów wyświetlone zostanie modalne okno dialogowe aby użytkownik dokonał pewnych zmian i kliknij "Zamknij" lub "Zapisz zmiany".

Problem polega na tym, że użytkownik wprowadza pewne zmiany i kliknięcia przycisku "Zamknij", zmiany zostałyby odzwierciedlone w modelu, do którego widok jest powiązany, ponieważ wiązanie danych jest natychmiastowe.

Moje pytanie brzmi: w jaki sposób odroczyć aktualizacje i wykonać wiązanie tylko po kliknięciu "Zapisz zmiany" lub jakoś zapomnieć o zmianach po kliknięciu "Anuluj".

Kod dla mojego modalnego okna dialogowego jest tak:

<div ui-modal class="fade static" ng-model="modalShown" id="myModal" data-backdrop="static"> 
     <div class="modal-header"> 
      <button type="button" class="close" ng-click="closeModal()" aria-hidden="true">&times;</button> 
      <h3>{{selectedClientFeature.feature.type}}</h3> 
     </div> 
     <div class="modal-body">  
      <ul class="unstyled columnlist"> 
       <li ng-repeat="country in countriesForEdit"> 
        <input type="checkbox" ng-model="country.selected"> {{country.name}} 
       </li> 
      </ul> 
     </div> 
     <div class="modal-footer"> 
      <a ng-click="closeModal()" class="btn">Close</a> 
      <a ng-click="saveChanges()" class="btn btn-primary">Save changes</a> 
     </div> 
    </div> 

Dzięki Shaun

Answer 1

angularjs użycie doc mieć przykład tylko tej sytuacji. To, czego potrzebujesz, to sklonowanie modelu (zob. angular.copy), przed wyświetleniem modemu edycji, a kiedy użytkownik kliknie na closeModal(), ponownie przypiszesz swój model do sklonowanej wartości. IMHO, zmieniam nazwę przycisku "Zamknij" na "Anuluj" i umieszczę go na prawo od "Zapisz zmiany", jest to bardziej jednoznaczne i wydaje się, że działa wiele witryn.

Nadzieja to pomaga

--dan

Answer 2

Aby zautomatyzować ręczne klonowanie/aktualizację modelu wymyśliłem dyrektywy lazy-model.
Zobacz https://stackoverflow.com/a/20643001/740245