Подтвердить что ты не робот

Обнаружение несохраненных данных с использованием угловых

Я новичок в AngularJs, так что это может быть тривиально. Есть ли встроенный AngularJs directive для обнаружения несохраненных данных в форме. Если нет, то как это сделать. Любые указатели будут оценены.

html-код

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

И мой код контроллера angular js

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

Я пытаюсь написать директиву для обнаружения несохраненных данных, и я предполагаю, что это будет написано в вышеуказанном контроллере. Исправьте меня, если это неправильно.

4b9b3361

ОТВЕТЫ

Ответ 1

AngularJS устанавливает классы CSS ng-pristine и ng-dirty в любом поле ввода, на котором вы использовали ng-model, и ваш 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>

Ответ 2

Мониторинг pristine/dirty Состояние - это хорошее место для запуска, но если вы хотите предоставить пользователю максимально возможное удобство использования, вам нужно будет сравнить текущие данные формы с данными начальной формы, чтобы обнаружить любые изменения. Если форма грязная, это все еще не означает, что она изменила данные.

Я создал очень маленький и полезный модуль для решения этой точной проблемы. С его помощью вы можете как можно проще сохранить свой код контроллера. Он добавляет свойство modified для каждой модели и даже автоматически формирует контроллер, и вы можете reset всю форму, просто вызвав предоставленный метод reset(), чтобы вы могли сосредоточиться на бизнес-логике приложения, а не на обнаружении изменений вручную.

Пожалуйста, см. демонстрацию.

Здесь вы можете найти дистрибутив, а также исходный код: https://github.com/betsol/angular-input-modified (он также доступен через Bower)

Если вам понадобится помощь в использовании этой библиотеки, вы можете связаться со мной лично. Я буду рад помочь. Ура!

Ответ 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
    }
});

Затем я очищаю слушателя от области уничтожения:

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

Надеюсь, что это поможет.