插值前在页面上捕获所有翻译文本

时间:2015-09-09 08:52:59

标签: angularjs angular-translate

  

尝试为管理员创建更改翻译的可能性   当前页面没有直接编辑语言文件。

我正在使用angular-translate,我希望在插值之前捕获当前页面上的所有翻译文本。我需要的是:

translationId: original-value-without-interpolation

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

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

然后在翻译过滤器中,我能够访问translationIdoriginal-value

在那之后不久,我记得我忘记了关于指令的一切,谁知道我可能忘记了使用相同插补器的其他内容。

现在感觉更方便的是找到一个替代方案,我可以在不编辑过滤器和指令的情况下捕获translationIdoriginal-value

是否有一种功能可以让我自己找到我尚未找到的功能?

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

  • angular 1.2.28
  • angular-translate 1.5.2

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

1 个答案:

答案 0 :(得分:1)

我找到了解决方案。

我做的第一件事就是创建一个自定义加载器。它基于默认值,但它也将所有已加载的翻译存储到对象中。这是后来传递的。

其次,我创建了一个translate过滤器和指令。这几乎也基于提供的一个添加的:

过滤

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.