在插值之前捕获页面上的所有翻译文本
Catch all translated texts on a page before interpolation
Trying to create a possibility for admins to change translations on
the current page without editing language files directly.
我正在使用 angular-translate,我想在插入之前捕获当前页面上的所有翻译文本。我需要什么:
translationId: original-value-without-interpolation
首先,我更改了转换过滤器并将自定义插值器写入 return 一个对象,而不仅仅是插值。
interpolate: function (string, interpolateParams) {
return {
string: string,
interpolateParams: interpolateParams,
translated: $translateDefaultInterpolation.interpolate(string, interpolateParams)
};
}
然后在翻译过滤器中,我能够访问 translationId
和 original-value
。
不久之后我想起我已经忘记了关于指令的一切,谁知道我可能还忘记了使用相同插值器的其他内容。
现在感觉找到一个替代方案会更安全,我可以在其中捕获 translationId
和 original-value
而无需编辑过滤器和指令。
是否有一个我可以挂钩但尚未找到的函数?
请记住,我只想捕获当前页面上的翻译,我需要在 {{values}} 被替换之前获取它们。
- angular 1.2.28
- angular-翻译 1.5.2
编辑:显然我可以访问翻译 table $translateProvider.translations()
,我可以在其中获取插值前的值。然后我只需要追踪当前页面上使用的所有翻译。 (Edit2:无法在运行时访问 $translationTable)
我找到了解决办法。
我做的第一件事是创建一个自定义加载程序。这是基于默认的,但它还将所有加载的翻译存储到一个对象中。后传。
其次,我创建了一个 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.
Trying to create a possibility for admins to change translations on the current page without editing language files directly.
我正在使用 angular-translate,我想在插入之前捕获当前页面上的所有翻译文本。我需要什么:
translationId: original-value-without-interpolation
首先,我更改了转换过滤器并将自定义插值器写入 return 一个对象,而不仅仅是插值。
interpolate: function (string, interpolateParams) {
return {
string: string,
interpolateParams: interpolateParams,
translated: $translateDefaultInterpolation.interpolate(string, interpolateParams)
};
}
然后在翻译过滤器中,我能够访问 translationId
和 original-value
。
不久之后我想起我已经忘记了关于指令的一切,谁知道我可能还忘记了使用相同插值器的其他内容。
现在感觉找到一个替代方案会更安全,我可以在其中捕获 translationId
和 original-value
而无需编辑过滤器和指令。
是否有一个我可以挂钩但尚未找到的函数?
请记住,我只想捕获当前页面上的翻译,我需要在 {{values}} 被替换之前获取它们。
- angular 1.2.28
- angular-翻译 1.5.2
编辑:显然我可以访问翻译 table $translateProvider.translations()
,我可以在其中获取插值前的值。然后我只需要追踪当前页面上使用的所有翻译。 (Edit2:无法在运行时访问 $translationTable)
我找到了解决办法。
我做的第一件事是创建一个自定义加载程序。这是基于默认的,但它还将所有加载的翻译存储到一个对象中。后传。
其次,我创建了一个 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.