[解決済み] AngularJSでMarkdownをHTMLに変換する
2022-02-15 16:05:35
質問
Contentful APIを使用して、あるコンテンツを取り込んでいます。コンテンツはjsonオブジェクトとしてNodeサーバーに届き、NodeサーバーはそれをAngularフロントエンドに渡します。jsonオブジェクトのコンテンツは、未処理のマークダウンテキストを含んでいます。
例えば、Angularの呼び出しは次のようになります。
var id = "asdf76f7g68sd7g";
$http.get("/api/article/" + id).then(function(res){
$scope.article = res.data;
});
そうすると、$scope.articleのオブジェクトは次のようになります。
$scope.article = {
title: "Some title",
content: "Lorem ipsum [dolor](http://google.com) sit amet, consectetur adipiscing elit. Integer iaculis turpis ut enim eleifend venenatis. Proin nec ante quis nulla porta finibus. Suspendisse at [mauris](http://google.com) nisi."
};
そして、私のHTMLでは、このようなコンテンツを表示します。
<p>{{article.title}}</p>
<p>{{article.content}}</p>
ここでの問題は、マークダウンがHTMLに変換されず、オブジェクトに表示されているようにレンダリングされることです。どのようにすれば、任意のマークダウンをHTMLに変換し、その結果をレンダリングできるのでしょうか?
どのように解決するのですか?
最も簡単な方法は、MarkdownをレンダリングできるAngularディレクティブを見つけることでしょう。
Googleで簡単に検索すると https://github.com/btford/angular-markdown-directive . これで問題は解決です。
関連
-
[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。
-
[解決済み】XMLHttpRequestモジュールが定義されていない/見つからない
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] Markdownのコメント
-
[解決済み] Markdownで画像サイズを変更する
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】Markdownファイル内のGitHub相対リンク
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み】document.getElementByIDは関数ではありません。
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み】JavaScriptのinnerHTMLで要素が更新されない
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】module.exports "モジュールが定義されていません"