在插值之前捕获页面上的所有翻译文本答案

【问题标题】：Catch all translated texts on a page before interpolation在插值之前捕获页面上的所有翻译文本
【发布时间】：2015-09-09 08:52:59
【问题描述】：

试图为管理员提供更改翻译的可能性当前页面，无需直接编辑语言文件。

我正在使用角度翻译，我想在插值之前捕获当前页面上的所有翻译文本。我需要什么：

translationId: original-value-without-interpolation

首先我更改了翻译过滤器并编写了一个自定义插值器来返回一个对象，而不仅仅是插值。

interpolate: function (string, interpolateParams) {
    return {
        string: string,
        interpolateParams: interpolateParams,
        translated: $translateDefaultInterpolation.interpolate(string, interpolateParams)
    };
}

然后在翻译过滤器中，我可以访问translationId 和original-value。

不久之后，我记得我已经忘记了关于指令的所有内容，谁知道我可能还忘记了使用相同插值器的其他内容。

现在感觉找到一个替代方案会更安全，我可以在不编辑过滤器和指令的情况下捕获translationId 和original-value。

是否有一个我还没有找到的功能可以让我自己挂钩？

请记住，我只想捕获当前页面上的翻译，并且需要在替换 {{values}} 之前获取它们。

角1.2.28
角平移 1.5.2

编辑：显然我可以访问翻译表$translateProvider.translations()，在那里我可以在插值之前获取值。然后我只需要追踪当前页面上使用的所有翻译。（Edit2：无法在运行时访问 $translationTable）

【问题讨论】：

标签： angularjs angular-translate

【解决方案1】：

我找到了解决办法。

我做的第一件事是创建一个自定义加载器。它基于默认值，但它还将所有加载的翻译存储到一个对象中。后来传下去了。

其次，我创建了一个translate 过滤器和指令。这也几乎基于提供的一个 put 加上：

过滤器

angular.module('app')

.filter('translate', ['$parse', '$translate', 'TranslationsHandler', function ($parse, $translate, TranslationsHandler) {

    var translateFilter = function (translationId, interpolateParams, interpolation) {

        if ( ! angular.isObject(interpolateParams)) {
            interpolateParams = $parse(interpolateParams)(this);
        }

        TranslationsHandler.addViewTranslation($translate.use(), translationId);

        return $translate.instant(translationId, interpolateParams, interpolation);
    };

    // Since AngularJS 1.3, filters which are not stateless (depending at the scope)
    // have to explicit define this behavior.
    translateFilter.$stateful = true;

    return translateFilter;
}]);

指令

angular.module('app')

.directive('translate', ['TranslationsHandler', '$translate', function (TranslationsHandler, $translate) {

    return {
        link: function (scope, el, attrs) {
            TranslationsHandler.addViewTranslation($translate.use(), attrs.translate);
        }
    };

}]);

这两个都加了TranslationsHandler.addViewTranslation

由于我提到我正在尝试使更改页面上的翻译成为可能，因此翻译对象如下所示：

var stuff = {
    file: {}, // Data loaded from translation files
    server: {}, // Already changed & saved translations but not yet merged with files
    changed: {}, // Currently changed translations
    current: {}, // Current view translations
    merged: {} // All together in this order: file + server + changed
}
// When in translation mode, the merged array is the one passed to angular-translate as the translation table
// Also on state change I clear the current object so that I can fill that up again
// And I use  $injector.get('$translate').refresh() this after every blur event on the input to change the translation. This way I am able to display the change on the page.

【讨论】：

虽然您的过滤器是无状态的，但我相信您不必将其标记为： 1. 它的行为在调用之间不会改变，对吧？ 2.每个语言和key只需要调用一次，这样就可以收集key了，对吧？所以它有状态，但是 Angular 没有办法找到它。
我猜，我错了。您的过滤器不是有状态的，因为它除了翻译之外还做了什么，而是因为翻译依赖于全局状态。
@maaartinus 我想我只是从原始翻译过滤器中复制了 1:1 并仅添加了 TranslationHandler.addViewTranslation。但我刚刚检查了 $stateless 的定义，我猜你是对的。