13

ブラウザーで Markdown をレンダリングできるように、AngularJS を使用して HTML のディレクティブを作成しようとしています。私が望むのは、指定されたファイルをロードして正しくレンダリングする属性を持つ<markdown>タグを持つことです。src

私はこれを次のように部分的に実装しました-

function Main($scope) {
    $scope.theContent = '#asgakfgajgfas\n##akfaljfqpo\ndhvkajvlbndvm';
};

angular.module('myApp', [])
    .directive("markdown", function ($compile) {
    return {
        restrict: 'E',
        require: 'model',
        scope: {
            value: "=model"
        },
        template: '<div ng-bind-html-unsafe="value | markdown"></div>'
    };
}).filter('markdown', function () {
    var converter = new Showdown.converter();
    return function (value) {
        return converter.makeHtml(value || '');
    };
});

そして対応するHTML -

<div ng-controller="Main">
    <markdown model="theContent"></markdown>
</div>

上記のコードのjsFiddle リンク(John Linquist の例に基づく) を次に示します。これは属性では機能しませんsrcが、モデルで指定されたマークダウン テキスト文字列を読み込むことができます。

srcこのコードを変更して、タグで指定されたファイルをロードする方法を教えてください。AngularJS が提供するを使用することを考えてい$httpましたが、ディレクティブ定義内で実際に使用することができませんでした。

私が達成したいことは<markdown src="a/b/c.md" />

4

3 に答える 3

21

私はついにこれに対する解決策を思いつきました。

// Render markdown in the HTML page
app.directive("markdown", function ($compile, $http) {
    var converter = new Showdown.converter();
    return {
        restrict: 'E',
        replace: true,
        link: function (scope, element, attrs) {
            if ("src" in attrs) {
                $http.get(attrs.src).then(function(data) {
                    element.html(converter.makeHtml(data.data));
                });
            } else {
                element.html(converter.makeHtml(element.text()));
            }
        }
    };
});

タグのコンテンツを取得して正しくレンダリングするか、属性で指定されたファイルのコンテンツを取得してレンダリングするカスタムlink関数を定義します。<markdown>src

于 2013-03-10T12:53:16.233 に答える
6

上記の回答に基づく別の選択肢。これはangular eval、watch、およびsanitizeを使用しています。つまり、ライブ編集に役立ち、htmlをサニタイズします。これは、マークダウンがスクリプトタグなどのインラインhtmlをそのまま残すために必要であり、角度式を使用してデータにアクセスします.

使用する

コントローラ：

 $scope.data = {markdown:"#H1"}

意見：

<div markdown="data.markdown">
</div>

<textarea ng-model="data.markdown"></textarea>

コード：

angular.module('markdown',['ngSanitize']).directive('markdown', function ($sanitize) {
    var converter = new Showdown.converter();
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            function renderMarkdown() {
                var htmlText = converter.makeHtml(scope.$eval(attrs.markdown)  || '');
                element.html($sanitize(htmlText));
            }
            scope.$watch(attrs.markdown, function(){
                renderMarkdown();
            });
            renderMarkdown();
        }
    }
});
于 2014-02-10T18:17:18.917 に答える