结合角度平移和降价

Question

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

假设我有字符串

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

通过降价运行它会给

这是一个链接 。

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

<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建议我做了一个指令。 如果其他人遇到此问题，这是我的解决方案：

首先是降价指令：

.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);
            }
        }
    };
}])

转换指令，转换键，然后在输出上使用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指令：

<translate key="MARKDOWNTEST" />

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

Answer 3

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

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

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

旁白：如果你需要在字符串中使用常规的html标签，你将不得不跳过$ sanitize。