Question

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

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

在验证功能中，我正在验证名称字段，如果一切正确，我将通过save方法保存数据。但是，如果名称字段不正确，我应该返回验证消息。在这种情况的角度可修改的文档中有一个example。

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

现在，如果名称字段长度超过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.
}

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

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

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

关于编译和动态添加指令的更多信息（这也有助于解决任务 - 如果我们可以将translate指令动态设置到错误容器中）就在这个问题的答案中：Dynamically add directive in AngularJS < / p>

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

工作JSFiddle - 第一个输入以OP的方式验证，第二个输入以上述功能验证。

希望它有所帮助。

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

1 个答案: