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」で記載すれば良かったっぽいのが変わった感じですかね?
そんなこんな。