将角度翻译与降价相结合

Question

我在我的应用中使用 angular-translate 和 showdown.js（摊牌是降价的一个端口）。我想通过降价运行翻译字符串的输出。您对如何实现这一目标有什么建议吗？

假设我有字符串

This is a [link](www.google.com).

通过降价运行它会给出

这是link。

我的目标是在我的翻译文件中包含这样的字符串，并通过 markdown 运行翻译后的文本。我使用 angular-markdown directive，它的用法如下：

<markdown>This is a [link](www.google.com).</markdown>

但是像这样结合 markdown 和 angular-translate

<p><markdown>{{ 'MARKDOWNTEST' | translate }}</markdown></p>

输出

<p>{{ 'MARKDOWNTEST' | translate }}</p>

Answer 1

我按照 Alp 的建议做了一个指令。如果其他人遇到这个问题，这是我的解决方案：

首先是 ma​​rkdown 指令：

.directive('markdown', ['$sanitize',function ($sanitize) {
    var converter = new Showdown.converter();
    return {
        restrict: 'AE',
        link: function (scope, element, attrs) {
            if (attrs.markdown) {
                scope.$watch(attrs.markdown, function (newVal) {
                    var html = newVal ? $sanitize(converter.makeHtml(newVal)) : '';
                    element.html(html);
                });
            } else {
                var html = $sanitize(converter.makeHtml(element.text()));
                element.html(html);
            }
        }
    };
}])

还有 transdown 指令，它翻译键，然后在输出上使用 markdown 指令。

.directive('transdown', ['$translate', function ($translate) {
    'use strict';
    return {
        restrict: 'AE',
        replace: true,
        scope: {
            key: '@'
        },
        template: "<span markdown='translation'></span>",
        link: function(scope, element, attrs){
            scope.$watch('key', function(n,o){
                if( n !== undefined ){
                    $translate(n).then(function(res){
                        scope.translation = res;
                    });
                }
            });
        }
    };
}]);

Answer 2

你可以创建一个翻译指令：

<translate key="MARKDOWNTEST" />

在指令中，您以编程方式调用 i18n 服务的翻译函数并设置元素的内容。

Answer 3

使用相同的库，这对我有用：

<div btf-markdown="'MARKDOWNTEST' | translate"></div>

不需要2条指令，也不需要重写原来的。

另外：如果您需要在字符串中使用常规 html 标签，则必须跳过 $sanitize。