使用angularjs检测未保存的数据
我是AngularJs的新手，所以这可能是微不足道的。 是否有任何内置的AngularJs directive来检测表单中未保存的数据。 如果没有，那么怎么去写一个。 任何指针将不胜感激。
html代码是
<input type="text" runat="server" />
而我的angular度js控制器代码是
function MyCtrl1($scope) { // code to do stuff }MyCtrl1.$inject = ['$scope'];
我试图编写一个指令来检测未保存的数据，我猜它是写在上面的controller.Correct我如果错了。
AngularJS在您使用ng-model的任何input字段上设置了CSS类ng-pristine和ng-dirty ，而您的FormController具有$pristine和$dirty属性，您可以检查该表单是否脏。 所以是的，这是可能的。
你能提供一些代码来显示你想要做什么吗？ 这会让你更容易帮助你。
编辑
下面是一个简单的例子，说明如何检测原始状态/脏状态，以及如何恢复到原始状态：
<!doctype html> <html ng-app> <head> <script src="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>
监视pristine/dirty状态pristine/dirty状态是一个很好的开始，但是如果你想为用户提供最好的可用性，你将不得不比较当前表单数据和初始表单数据来检测任何变化。 如果表单脏了，但这并不意味着它已经改变了数据。
我已经创build了一个非常小而有用的模块来解决这个确切的问题。 有了它，你可以保持你的控制器代码尽可能简单。 它将modified属性添加到每个模型，甚至自动形成控制器，您可以通过调用一个提供的reset()方法来重置整个表单，这样您就可以专注于应用程序的业务逻辑，而不是手动检测更改。
请参阅演示 。
你可以在这里find一个分发包和源代码： https ： //github.com/betsol/angular-input-modified （也可以通过Bower获得 ）
如果您需要使用此库的任何帮助 – 您可以亲自联系我。 我会很乐意提供帮助。 干杯!
这是我在我的控制器中做的。
当我获取表单数据进行修改时，首先将其string表示保存到作用域variables，如下所示：
$scope.originalData = JSON.stringify($scope.data);
然后我创build一个状态改变监听器：
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 } });
然后我清除范围摧毁的听众：
$scope.$on('$destroy', function () { window.onbeforeunload = null; $locationChangeStartUnbind(); });
希望这可以帮助。
试试这个与ui-router一起使用的指令
