Question

我是AngularJs的新手，所以这可能是微不足道的。是否有任何内置的AngularJs directive来检测表单中未保存的数据。如果没有，那么如何写一个。任何指针都会受到赞赏。

html代码是

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

我的角度js控制器代码是

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

我正在尝试编写一个指令来检测未保存的数据，我猜它是在上面的控制器中编写的。如果错误，请更正我。

Answer 1

AngularJS在您使用ng-model的任何输入字段上设置CSS类ng-pristine和ng-dirty，并且您的FormController具有属性$pristine和$dirty你可以查看表格是否脏。是的，这是可能的。

你能提供一些显示你想要做的事情的代码吗？这样可以更轻松地帮助您。

修改

这是一个如何检测原始/脏状态以及如何恢复到原始状态的简单示例：

<!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>

Answer 2

监控pristine/dirty状态是一个很好的起点，但如果您想为用户提供最佳的可用性，则必须将当前表单数据与初始表单数据进行比较以检测任何更改。 如果表单是脏的，它仍然不意味着它已经更改了数据。

我已经创建了一个非常小且有用的模块来解决这个问题。有了它，您可以使控制器代码尽可能简单。它为每个模型添加modified属性，甚至自动构建控制器，您可以通过调用提供的reset()方法重置整个表单，这样您就可以专注于应用程序的业务逻辑，而不是手动检测更改。 / p>

请see the Demo。

您可以在此处找到分发包和源代码： https://github.com/betsol/angular-input-modified（也可通过 Bower 获取）

如果您在使用此库时需要任何帮助 - 您可以亲自与我联系。我很乐意提供帮助。干杯！

Answer 3

这就是我在控制器中所做的。

当我获得用于修改的表单数据时，首先我将其字符串表示保存到范围变量中，如下所示：

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

然后我创建一个状态更改侦听器：

 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
    }
});

然后我清除范围destroy上的监听器：

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

希望这有帮助。

Answer 4

尝试使用与ui-router

配合使用的指令

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

使用angularjs检测未保存的数据

4 个答案: