Works by

Ren's blog

@rennnosuke_rk 技術ブログです

【AngularJS】Viewにhtml文字列を挿入、htmlとしてレンダリングする

AngularJSを使ったフロント開発の中で、技術記事のAPIで取得したHTMLを画面に表示させたくなった ときの処理をメモ。

ng-bind-htmlでViewにhtml文字列をサニタイズされた形で挿入できます。

View
<!-- article.bodyプロパティにはHTMLが入っている-->
<div ng-bind-html="article.body"></div>
    // APIで記事を取得
      articleService.getArticle().then(function(response) {
        // 記事情報
        $scope.selectedArticle = response.data;
      });
    };
実行結果

f:id:rennnosukesann:20180311235625p:plain


実際にはQiitaAPIを叩いてMarkdownをHTMLに変換して、マテリアルデザインにして・・・とか色々やっているのですが割愛。 ちゃんとHTMLの文章を挿入することができました。

ちなみにHTMLを普通の文字列としてViewに挿入する場合はng-bindで可能。

参考文献

AngularJS アプリケーションプログラミング