如何一起使用 angular-translate 和 ng-xeditable 的验证？答案

【问题标题】：How to use angular-translate and ng-xeditable's validation together?如何一起使用 angular-translate 和 ng-xeditable 的验证？
【发布时间】：2015-12-10 14:00:40
【问题描述】：

我正在使用angular-translate 和angular-xeditable。我有以下字段：

<a href="#"
       editable-text="name"
       onbeforesave="validate($data)"
       onaftersave="save(name)">
       {{ name }}
</a>

在 validate 函数中，我正在验证 name 字段，如果一切正确，我将通过 save 方法保存数据。但是，如果 name 字段不正确，我应该返回一条验证消息。在这种场景的 angular-xeditable 文档中有一个example。

$scope.validate = function(name) {
    if (name.length > 10) {
        return "Validation Message that doesn't need multiple languages";
    }
}

现在，如果 name 字段的长度超过 10 个字符，则会向用户显示一条消息，并且不会保存数据。但是，我在我的应用程序中使用 angular-translate，我想显示一条以适当语言翻译的消息。此外，我想针对不同的场景定制我的消息，这样我就不需要为我的所有字段提供数千条不同的消息。

例如：

var translationsEN = {
    STRING_LENGTH_MESSAGE: '{{ fieldName }} should be between {{ min }} and {{ max }}',
    REQUIRED: '{{ fieldName }} is required.'
}
var translationsDE = {
    // The same messages in German.
}

现在我能想到的最好的事情是将验证函数中的代码更改为：

$scope.validate = function(name) {
    if (name.length > 10) {
        $translate('VALIDATION_MESSAGE', { fieldName: 'name', min: 0, max: 10 })
            .then(function(translation) {
                $scope.message = translation;
            }
        );

        return $scope.message;
    }
}

当然，在显示错误信息的时候，错误信息还没有被翻译，显示给用户的信息是不正确的。

我怎样才能达到预期的效果 - 向用户显示翻译后的验证消息？

这是我的示例的JSFiddle。

【问题讨论】：

标签： angularjs x-editable angular-translate

【解决方案1】：

今天花了相当多的时间:)

似乎一种解决方法是编译一个具有translate 指令的元素，因此 OP 的函数看起来像：

$scope.validateName = function(name) {
    if (name.length > 10) {
      console.log('fail')
      var element = $compile('<span translate="VALIDATION_MESSAGE"></span>')($scope)[0];
      return $timeout(function() {
        $scope.$apply();
        return element.textContent
      }, 10);
    }
  };

更多关于编译和动态添加指令（这也将有助于解决任务——如果我们可以动态地将翻译指令设置为错误容器）在这个问题的答案中：Dynamically add directive in AngularJS

更新：稍微更改了代码，以便它可以在控制器中验证名称。如果在服务器上执行验证，则可能不需要$timeout，但在这种情况下，将无法使用$scope.$apply()，否则不会对结果进行插值。

Working JSFiddle — 第一个输入以 OP 的方式验证，第二个 — 使用上面的函数。

希望对你有帮助。

【讨论】：