HTMLを出力 – AngularJS

[PR]

AngularJSを始めたのでその辺りの記事もちらほらと。

ということでまずはHTMLをエスケープせずに表示する方法。

例えばブログのタグリストにいい感じにリンク付けて表示するぜ!みたいな場合は、

var mainCtrl = function($scope, $http, $sce) {
    $scope.getTagLink = function(tags) {
        var txt = "タグ:";
        for (var i = 0; i < tags.length; i ++) {
            txt += '<a href="" class="tag">';
            txt += tags[i];
            txt += '</a>';
        }
        return $sce.trustAsHtml(txt);
    }
}

app.jsファイル側のコントローラに$sceを読み込んで、$sce.trustAsHtml(表示したいテキスト)してください。

HTML側は、

<article ng-show="blogs.length" ng-repeat="blog in blogs" id="{{blog.id}}">
    <p ng-bind-html="getTagLink(blog.tags)" class="blog-tags"></p>
</article>
<p ng-hide="blogs.length" class="caution">検索中…さもなくばデータあれへん</p>

といった感じで。

参考はこちら
How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

以前はapp.js側でわざわざ処理しなくても、HTML側で「ng-bind-html-unsafe」で記載すれば良かったっぽいのが変わった感じですかね?

そんなこんな。