Angularjs Автосохранение ввода

Question

Я хочу, чтобы автоматически сохранить контроль над текстовой областью через 5 секунд после последнего изменения и отобразить состояние грязного флага.

Поэтому, когда я начинаю печатать, грязный флаг должен быть правдой, и если я перестаю печатать в течение 5 секунд, я должен отправить последнее значение в исходный код и поменять флаг грязной на false.

Я знаю ng-model-option и вариант отладки. Это хорошее решение для меня, но это не изменит грязный флаг. ng-change срабатывает после таймаута 5 секунд не в начале изменения. Идеальное решение для меня было бы задержкой (debounce) внутри ng-change не раньше, поэтому я могу поймать состояние изменения.

Любая идея, как я могу справиться с этим?

Answer 1

Я попытался создать директиву, которая может помочь вам. Пожалуйста, ознакомьтесь с приведенным ниже кодом.

angular.module('myApp', []).controller('myController', ['$scope', 
 
    function($scope) { 
 
     $scope.myModel = 'Model'; 
 
    } 
 
    ]) 
 
    .directive('delayBind', ['$timeout', 
 
    function($timeout) { 
 
     return { 
 
     scope: { 
 
      ngModel: "=" 
 
     }, 
 
     restrict: "A", 
 
     require: 'ngModel', 
 
     link: function(scope, element, attrs, ctrl) { 
 
      scope.timeout; 
 
      var parser = function(value,oldValue) { 
 
      scope.value=value; 
 
      if (scope.timeout) { 
 
       $timeout.cancel(timeout); 
 
      } 
 
      timeout = $timeout(function() { 
 
       scope.ngModel=scope.value; 
 
       ctrl.$setPristine(); 
 
       scope.$apply(); 
 
      }, 5000); 
 
      return ctrl.$modelValue; 
 
      } 
 
      ctrl.$parsers.push(parser); 
 
     } 
 
     } 
 
    } 
 
    ])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='myApp'> 
 
    <div ng-controller='myController'> 
 
    <form name='MyForm'> 
 
    {{myModel}} 
 
    <br/> 
 
    <input name='MyModel' type="text" delay-bind ng-model="myModel" /> 
 
     <br> 
 
     {{MyForm.MyModel.$dirty}} 
 
    </form> 
 
    </div> 
 
</div>

Answer 2

Один из способов сделать это - использовать как ngChange, так и $ timeout. В принципе, вы должны использовать ngChange для мгновенного изменения статуса, а затем внутри функции изменения создать функцию времени ожидания, которая выполняется еще через 5 секунд после последнего изменения.

Это может выглядеть примерно так:

myApp.controller('MyCtrl', function($scope, $timeout){ 

var timeout; 
$scope.instant = false; 
$scope.delayed = false; 

//INSTANT & DELAY Function 
$scope.change = function(){  
    $scope.instant = true; 

    if(timeout) { 
     $timeout.cancel(timeout); 
    } 
    timeout = $timeout(function(){ 
     $scope.delayed = true; 
    }, 5000); 

}); 

Вы бы затем вызвать change() в директиве ngChange.

Вот рабочая JSFiddle