4

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

假设我有字符串

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

通过降价运行它会给

这是一个链接。

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

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

但是像这样结合降价和角度翻译

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

输出

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

3 回答 3

3

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

首先是降价指令：

.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;
                    });
                }
            });
        }
    };
}]);
于 2014-03-31T12:07:34.620 回答
1

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

<translate key="MARKDOWNTEST" />

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

于 2014-03-28T15:13:45.337 回答
1

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

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

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

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

于 2014-05-20T23:47:43.383 回答