Rileva i dati non salvati utilizzando angularjs

Sono un novizio di AngularJs, quindi potrebbe essere banale. Sono presenti degli AngularJs incorporati directive per rilevare i dati non salvati in un modulo. In caso contrario, come procedere per scriverne uno. Qualsiasi suggerimento sarebbe apprezzato.Rileva i dati non salvati utilizzando angularjs

codice HTML è

<input type="text" runat="server" />

E il mio js angolari codice del controller è

function MyCtrl1($scope) { 
     // code to do stuff 
}MyCtrl1.$inject = ['$scope'];

Sto cercando di scrivere una direttiva per rilevare i dati non salvati, e sto cercando di indovinare la sua da scrivere a il controller di cui sopra. Mi correggo se sbagliato.

fonte

2013-02-13 iJade

AngularJS imposta le classi CSS e ng-pristineng-dirty su qualsiasi campo di input che hai usato ng-modello, e il vostro FormController ha le proprietà $pristine e $dirty cui è possibile controllare per vedere se il modulo è sporco o meno. Quindi sì, è possibile.

Potresti fornire un codice che mostri cosa stai cercando di fare? Ciò renderebbe più facile aiutarti.

EDIT

Ecco un semplice esempio di come rilevare uno stato incontaminato/sporca, e su come ripristinare uno stato incontaminato:

<!doctype html> 
<html ng-app> 
<head> 
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> 
    <script type="text/javascript"> 
    function Ctrl($scope) { 
     var initial = {text: 'initial value'}; 
     $scope.myModel = angular.copy(initial); 
     $scope.revert = function() { 
      $scope.myModel = angular.copy(initial); 
      $scope.myForm.$setPristine(); 
     } 
    } 
    </script> 
</head> 
<body> 
    <form name="myForm" ng-controller="Ctrl"> 
     myModel.text: <input name="input" ng-model="myModel.text"> 
     <p>myModel.text = {{myModel.text}}</p> 
     <p>$pristine = {{myForm.$pristine}}</p> 
     <p>$dirty = {{myForm.$dirty}}</p> 
     <button ng-click="revert()">Set pristine</button> 
    </form> 
</body> 
</html>

fonte

2013-02-13 09:33:20

Dat funziona bene. Conosco un'altra domanda, ma è possibile notificare all'utente le modifiche non salvate quando tenta di chiudere il browser o navigare in un'altra pagina – iJade

Certo, è assolutamente possibile. Lo faresti con una direttiva sul modulo, ma come hai detto tu, dovrebbe essere in un'altra domanda qui. –

pubblicato come un'altra domanda. Guarda. http://stackoverflow.com/questions/14852802/detect-unsaved-changes-and-alert-user-using-angularjs – iJade

Prova questa direttiva che funziona con ui-router

https://github.com/facultymatt/angular-unsavedChanges

fonte

2014-04-15 19:03:58 pdorgambide

Ho provato il tuo suggerimento. Ma ho un problema Il pristine non viene aggiornato una volta modificato il modulo. Quindi, se l'utente inserisce dei testi, in qualche modo lo cancella, la pagina continua a rilevare i dati non salvati. – asubanovsky

Monitoraggio pristine/dirty stato è un buon punto di partenza, ma se si desidera fornire all'utente la migliore usabilità possibile, sarà necessario confrontare i dati del modulo corrente con i dati iniziali del modulo per rilevare eventuali modifiche. Se il modulo è sporco, ciò non significa che abbia cambiato i dati.

Ho creato un modulo molto piccolo e utile per risolvere questo problema esatto. Con esso puoi mantenere il codice del tuo controller il più semplice possibile. Aggiunge la proprietà modified a ogni modello e persino al modulo di controllo automaticamente e puoi reimpostare l'intero modulo semplicemente chiamando il metodo reset() fornito, in modo da poterti concentrare sulla logica aziendale dell'applicazione anziché rilevare manualmente le modifiche.

Si prega di see the Demo.

è possibile trovare un pacchetto di distribuzione, nonché un codice sorgente qui: https://github.com/betsol/angular-input-modified (è disponibile anche tramite Bower)

Se hai bisogno di aiuto con l'utilizzo di questa libreria - potete contattarmi personalmente. Sarò felice di aiutare. Saluti!

fonte

2014-10-13 11:15:39

Ho provato questo, ma per me ha modificato sì o no, non cambia affatto, sto usando oclazyload per caricare i moduli.Io sono così frustrato, ma meraviglioso plug-in Avete qualche procedura graduale per implementare? –

Modificato sempre falso per me :-( –

Questo è davvero interessante: _ "Se la forma è sporca, ciò non significa che abbia cambiato i dati." _ Mi piacerebbe sapere cosa significa :) – sakovias

Questo è ciò che ho fatto nel mio controller.

Quando ottengo i dati del modulo per la modifica, per prima cosa salvare la sua rappresentazione di stringa ad una variabile ambito come questo:

$scope.originalData = JSON.stringify($scope.data);

Poi creare un cambiamento di stato ascoltatore:

var $locationChangeStartUnbind = $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 
    if ($scope.originalData !== JSON.stringify($scope.data)) { 
     //Show alert and prevent state change 
    } else { 
     //DO NOTHING THERE IS NO CHANGES IN THE FORM 
    } 
});

Poi ho cancellare l'ascoltatore su scope destroy:

$scope.$on('$destroy', function() { 
    window.onbeforeunload = null; 
    $locationChangeStartUnbind(); 
});

Spero che questo aiuti.

fonte

2015-04-20 16:58:50 manukyanv07

Questo è eccellente, grazie! ps: a volte Angular può aggiungere' $$ H proprietà AshKey' per il modello; usando 'angular.toJson ($ scope.data)' invece di 'JSON.stringify ($ scope.data) 'significherà che angular si prenderà cura di rimuovere qualsiasi variabile di tracciamento che sta usando per tracciare gli stati. – iamserious

Questo è esattamente quello che stavo cercando - grazie! Facendo seguito al commento di @iamserious, ho anche trovato molto più affidabile l'uso di 'angular.toJson ($ scope.data)' – XstiX

Non usare listener nei controller. Controlla le migliori prestazioni –

Rileva i dati non salvati utilizzando angularjs

risposta

Problemi correlati