Объединить угловой перевод с уценкой

Я использую angular-translate и showdown.js в моем приложении (showdown — это порт уценки). Я хотел бы запустить вывод переведенной строки через уценку. Есть ли у вас какие-либо предложения о том, как этого добиться?

Допустим, у меня есть строка

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

Запуск через уценку даст

Это ссылка.

Моя цель - иметь такие строки в моих файлах перевода и запускать переведенный текст через уценку. Я использую директиву angular-markdown, которая используется следующим образом :

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

Но сочетание уценки и углового перевода, как это

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

выходы

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

javascript angularjs markdown angular-translate showdown
person swenedo    schedule 28.03.2014    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Я сделал директиву, как предложил Альп. Если кто-то еще столкнется с этой проблемой, вот мое решение:

Сначала директива markdown:

.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, которая переводит ключ, а затем использует директиву уценки на выходе.

.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;
                    });
                }
            });
        }
    };
}]);
person swenedo    schedule 31.03.2014
comment
Я думаю, что это правильный путь, но я бы сделал это внутри пользовательского интерполятора (angular-translate.github.io/docs/#/guide/) Таким образом, разметка будет выглядеть так: ‹span translate=some_markdown_key translate-interpolation=markdownFormat›‹/span› - person Bo Lora; 20.01.2017

arrow_upward
1
arrow_downward

Вы можете создать директиву перевода:

<translate key="MARKDOWNTEST" />

А в директиве вы программно вызываете функцию перевода службы i18n и устанавливаете содержимое элемента.

person Alp    schedule 28.03.2014

arrow_upward
1
arrow_downward

Используя те же самые библиотеки, это работает для меня:

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

Не нужно ни 2 директивы, ни переписывать оригинал.

Кроме того: если вам нужно использовать обычные html-теги внутри ваших строк, вам придется пропустить $sanitize.

person Christian Bonato    schedule 20.05.2014