結合角度平移和降價

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。