Question

我想在上次更改后5秒自动保存文本区域控件并显示脏标志状态。

所以当我开始输入脏标志应该是真的，如果我停止输入5秒钟，我应该将最新值发送到后端代码并将脏标志更改为假。

我知道ng-model-option和辩护选项。对我来说这是一个很好的解决方案，除了不会改变脏标志。在{5}的超时后，ng-change触发，而不是在更改开始时。对我来说一个完美的解决方案是ng-change内部的延迟（去抖动），所以我可以赶上变化状态。

知道如何处理吗？

Answer 1

您可以通过同时使用ngChange和$ timeout来实现此目的。基本上，您可以使用ngChange进行即时状态更改，然后在更改函数内创建一个$ timeout函数，该函数在最后一次更改后运行另外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);

 });

然后，您将在ngChange指令中调用change()。

这是一个有效的JSFiddle

Answer 2

我尝试创建一个可能对您有帮助的指令。请检查以下代码。

＆＃13;

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

＆＃13;

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

＆＃13;

Angularjs自动保存输入

2 个答案: