【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;
      });
    };

実行結果

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

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

参考文献

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