7

我正在开发一个应用程序，当用户更改某些内容时会自动保存更改，例如输入字段的值。我编写了一个autosave指令，该指令被添加到所有应该自动触发保存事件的表单字段中。

模板：

   <input ng-model="fooCtrl.name" autosave>
   <input ng-model="fooCtrl.email" autosave>

指示：

  .directive('autosave', ['$parse', function  ($parse) {

    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {

        function saveIfModelChanged () {
          // save object containing name and email to server ...
        }

        ngModel.$viewChangeListeners.push(function () {
          saveIfModelChanged();
        });
      }
    };
  }]);

到目前为止，这一切对我来说都很好。但是，当我将验证添加到组合中时，例如验证输入字段是有效的电子邮件地址，undefined一旦 viewValue 更改为无效的电子邮件地址，modelValue 就会设置为。

我想做的是：记住最后一个有效的模型值并在自动保存时使用它。如果用户将电子邮件地址更改为无效，则包含name和的对象email仍应保存到服务器。使用当前有效name和最后有效email。

我开始保存最后一个有效的模型值，如下所示：

添加了验证的模板：

   <input type="email" ng-model="fooCtrl.name" autosave required>
   <input ng-model="fooCtrl.email" autosave required>

保存 lastModelValue 的指令：

  .directive('autosave', ['$parse', function  ($parse) {

    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {

        var lastModelValue;

        function saveIfModelChanged () {

          // remeber last valid modelValue
          if (ngModel.$valid) {
             lastModelValue = ngModel.$modelValue;
          }

          // save object containing current or last valid
          // name and email to server ...
        }

        ngModel.$viewChangeListeners.push(function () {
          saveIfModelChanged();
        });
      }
    };
  }]);

我的问题是，如何lastModelValue在保存的同时使用，但在视图中保留无效值？

编辑：

正如下面 Jugnu 所建议的，另一种可能性是包装和操作验证器中的构建。

我试图遵循：包装所有现有的验证器并记住最后一个有效值，以在验证失败时恢复它：

Object.keys(ngModel.$validators).forEach(function(validatorName, index) {
    var validator = ngModel.$validators[validatorName];
    ngModel.$validators[validatorName] = createWrapper(validatorName, validator, ngModel);
});

function createWrapper(validatorName, validator, ngModel){

  var lastValid;

  return function (modelValue){

    var result = validator(modelValue);

    if(result) {
      lastValid = modelValue;
    }else{
        // what to do here? maybe asign the value like this:
      // $parse(attrs.ngModel).assign(scope, lastValid);
    }

    return result;
  };
}

但我也不确定如何继续使用这种方法。我可以在没有 AngularJS 的情况下设置模型值并尝试验证新设置的值吗？

4

3 回答 3

3

由于您要为每个字段修改发送整个对象，因此您必须将整个对象的最后一个有效状态保留在某处。我想到的用例：

  1. 你有一个有效的对象{ name: 'Valid', email: 'Valid' }。
  2. 您将名称更改为无效；放置在名称输入处的autosave指令知道它自己的最后一个有效值，因此会发送正确的对象。
  3. 您也将电子邮件更改为无效。放置在电子邮件输入中的autosave指令知道它自己的最后一个有效值，但不知道名称。如果最后一个已知的好值没有集中，{ name: 'inalid', email: 'Valid' }则会发送一个类似的对象。

所以建议：

  1. 保留您正在编辑的对象的经过清理的副本。通过净化，我的意思是任何无效的初始值都应该被有效的原始值替换（例如零、空值等）。将该副本公开为控制器成员，例如fooCtrl.lastKnowngood.

  2. 让我们autosave知道最后一个已知的良好状态，例如：

    <input ng-model="fooCtrl.email" autosave="fooCtrl.lastKnowngood" required />

  3. 保留该对象中最后一个已知的良好局部值；利用ng-model表达式，例如：

    var lastKnownGoodExpr = $parse(attrs.autosave);
var modelExpr = $parse(attrs.ngModel);

function saveIfModelChanged () {
    var lastKnownGood = lastKnownGoodExpr(scope);

    if (ngModel.$valid) {
        // trick here; explanation later
        modelExpr.assign({fooCtrl: lastKnownGood}, ngModel.$modelValue);
    }

    // send the lastKnownGood object to the server!!!
}
  4. 发送lastKnownGood对象。

诀窍，它的缺点以及如何改进：将本地模型值设置为lastKnownGood对象时，您使用与当前范围不同的上下文对象；此对象假定调用了控制器fooCtrl（参见第 1 行modelExpr.assign({fooCtrl: lastKnownGood}, ...)）。如果您想要一个更通用的指令，您可能希望将根作为不同的属性传递，例如：

<input ng-model="fooCtrl.email" autosave="fooCtrl.lastKnowngood" required
    autosave-fake-root="fooCtrl" />

您也可以ng-model自己对表达式进行一些解析以确定第一个组件，例如子字符串 0 → 第一次出现点（再次简单化）。

另一个缺点是您如何处理更复杂的路径（在一般情况下），例如fooCtrl.persons[13].address['home'].street- 但这似乎不是您的用例。

顺便说一句，这个：

ngModel.$viewChangeListeners.push(function () {
    saveIfModelChanged();
});

可以简化为：

ngModel.$viewChangeListeners.push(saveIfModelChanged);
于 2015-09-17T12:03:15.633 回答
3

我创建了一个简单的指令，用作ng-model指令的包装器，并将始终保持最新的有效模型值。它被称为valid-ng-model并且应该在您希望拥有最新有效值的地方替换ng-model的使用。

我在这里创建了一个示例用例，希望你会喜欢。欢迎任何改进的想法。

这是valid-ng-model指令的实现代码。

app.directive('validNgModel', function ($compile) {
  return {
      terminal: true,
      priority: 1000,
      scope: {
        validNgModel: '=validNgModel'
      },
      link: function link(scope, element, attrs) {

        // NOTE: add ngModel directive with custom model defined on the isolate scope
        scope.customNgModel = angular.copy(scope.validNgModel);
        element.attr('ng-model', 'customNgModel'); 
        element.removeAttr('valid-ng-model');

        // NOTE: recompile the element without this directive
        var compiledElement = $compile(element)(scope);
        var ngModelCtrl = compiledElement.controller('ngModel');

        // NOTE: Synchronizing (inner ngModel -> outside valid model)
        scope.$watch('customNgModel', function (newModelValue) {
          if (ngModelCtrl.$valid) {
            scope.validNgModel = newModelValue;
          }
        });

        // NOTE: Synchronizing (outside model -> inner ngModel)
        scope.$watch('validNgModel', function (newOutsideModelValue) {
          scope.customNgModel = newOutsideModelValue;
        });
      }
    };
});

编辑：没有隔离范围的指令实现：Plunker。

于 2015-09-21T20:07:42.503 回答
2

Angular 默认验证器只会在模型有效的电子邮件地址时为其赋值。要克服这个问题，您需要覆盖默认验证器。

有关更多参考，请参阅：https ://docs.angularjs.org/guide/forms#modifying-built-in-validators

您可以创建一个directive将无效模型值分配给某个范围变量，然后您可以使用它。

我为电子邮件验证创建了一个小型演示，但您可以将其扩展为涵盖所有其他验证器。

这是小提琴：http ://plnkr.co/edit/EwuyRI5uGlrGfyGxOibl?p=preview

于 2015-09-17T12:03:39.483 回答