Javascript 使用angularjs检测未保存的数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14849857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect unsaved data using angularjs
提问by iJade
I'm a newbie to AngularJs, so this might be trivial.
Are there any inbuilt AngularJs directiveto detect unsaved data in a form.
If not then how to go about writing one.
Any pointers would be appreciated.
我是 AngularJs 的新手，所以这可能是微不足道的。是否有任何内置的 AngularJsdirective来检测表单中未保存的数据。如果没有，那么如何去写一个。任何指针将不胜感激。
html code is
html代码是
<input type="text" runat="server" />
And my angular js controller code is
我的 Angular js 控制器代码是
function MyCtrl1($scope) {
// code to do stuff
}MyCtrl1.$inject = ['$scope'];
I am trying to write a directive to detect unsaved data, and I'm guessing its to be written in the above controller.Correct me if wrong.
我正在尝试编写一个指令来检测未保存的数据，我猜它会写在上面的控制器中。如果错了，请纠正我。
回答by Anders Ekdahl
AngularJS sets the CSS classes ng-pristineand ng-dirtyon any input field you've used ng-model on, and your FormController has the properties $pristineand $dirtywhich you can check to see if the form is dirty or not. So yes, it's possible.
AngularJS设置CSS类ng-pristine和ng-dirty任何输入栏你已经使用在NG-模型，您的FormController拥有的属性$pristine和$dirty您可以查看是否窗体是脏的。所以是的，这是可能的。
Could you provide some code that shows what you're trying to do? That would make it easier to help you.
你能提供一些代码来显示你想要做什么吗？这样会更容易帮助你。
EDIT
编辑
Here's a simple example of how to detect a pristine/dirty state, and how to revert to a pristine state:
这是一个如何检测原始/脏状态以及如何恢复原始状态的简单示例：
<!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>
回答by Slava Fomin II
Monitoring pristine/dirtystate is a good place to start, but if you want to provide user with the best possible usability, you will have to compare current form data with initial form data to detect any changes. If form is dirty it still doesn't mean that it has changed data.
监控pristine/dirty状态是一个很好的起点，但如果您想为用户提供尽可能好的可用性，您必须将当前表单数据与初始表单数据进行比较以检测任何更改。如果表单很脏，它仍然不意味着它已经更改了数据。
I've created a very small and useful module to solve this exact problem. With it you can keep your controller code as simple as possible. It adds modifiedproperty to every model and even form controller automatically and you can reset entire form by just calling a provided reset()method, so you can concentrate on your application's business logic instead of detecting changes manually.
我创建了一个非常小而有用的模块来解决这个确切的问题。有了它，您可以使控制器代码尽可能简单。它modified自动为每个模型甚至表单控制器添加属性，您只需调用提供的reset()方法即可重置整个表单，因此您可以专注于应用程序的业务逻辑，而不是手动检测更改。
Please see the Demo.
请参阅演示。
You can find a distribution package as well as a source code here: https://github.com/betsol/angular-input-modified(it's also available via Bower)
您可以在此处找到分发包和源代码：https: //github.com/betsol/angular-input-modified（也可通过Bower 获得）
If you will need any help with using this library - you can contact me personally. I will be glad to help. Cheers!
如果您在使用此库时需要任何帮助 - 您可以亲自与我联系。我很乐意提供帮助。干杯!
回答by manukyanv07
This is what I did in my Controller.
这就是我在我的控制器中所做的。
When I get the form data for modification, first I save its string representation to a scope variable like this:
当我获取表单数据进行修改时，首先我将其字符串表示保存到一个范围变量中，如下所示：
$scope.originalData = JSON.stringify($scope.data);
Then I create a state change listener:
然后我创建一个状态更改侦听器：
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
}
});
Then I clear the listener on scope destroy:
然后我清除作用域销毁上的侦听器：
$scope.$on('$destroy', function () {
window.onbeforeunload = null;
$locationChangeStartUnbind();
});
Hope this helps.
希望这可以帮助。
回答by pdorgambide
Try this directive that works with ui-router
试试这个适用于 ui-router 的指令
