javascript - 基于 Angular 翻译的自定义过滤器

Question

我正在使用 Pascal Precht's angular-translate模块。我有我的翻译命名空间，例如

{
  "customer.account.header.main": "stgsdefghdsf",
  "customer.account.column.name": "sdfszdfs"
  "customer.account.column.address": "dsghfg",
  "customer.account.enum.VALUE1": "dfsgsdf",
  "customer.account.enum.VALUE2": "sdfgsdfg"
}

我以这种方式在模板中使用它们:

{{ "customer.account.enum.VALUE1" | translate }}

它工作得很好，但我需要制作一个自定义翻译过滤器，它会在下面使用 translate。我需要传递 namespace 前缀，例如

{{ enumValue | translateEnum:"customer.account.enum" }}

其中 enumValue 可以是 VALUE1、VALUE2，直接来自 API。

不幸的是，下面的不是解决方案，因为这个机制将被几个更高级别的机制使用，它只需要接受一个过滤器(可能还有过滤器参数)，而不是一个表达式例如 ... + ... |过滤器

{{ "customer.account.enum." + enumValue | translate }}

问题是 translate 是异步的，因为获取语言是异步的。我不知道我该如何应对，因为我没有引用在 then promise 解决后可能分配的对象。我得到的只是值(value)。正如原始 translate 使用的那样。

到目前为止我已经尝试过那些:

module.filter('translateEnumInstant', [
  '$translate', function($translate) {
    return function(input, namespace) {
      return $translate.instant(namespace + '.' + input);
    };
  }
]).filter('translateEnumFilter', [
  '$filter', function($filter) {
    var translateFilter;
    translateFilter = $filter('translate');
    return function(input, namespace) {
      return translateFilter(namespace + '.' + input);
    };
  }
]).filter('translateEnumPromise', [
  '$translate', function($translate) {
    return function(input, namespace) {
      return $translate(namespace + '.' + input);
    };
  }
]);

但它们都不能正常工作。前两个是同步的，它们加载以前的语言，因为它们不等待通过 json 获取新语言。最后一个返回 promise ，因此它只显示 {}，这更糟糕。

请告诉我如何编写这样的指令。

Answer 1

这个自定义过滤器应该可以工作:

    .filter('translateEnum', function($filter) {
        var translateFilter = function (value, param) {
            return $filter('translate')(param+"."+value);
        }
        translateFilter.$stateful = true;
        return translateFilter;
    })