Angular binding within binding

Question

I'm in the process of refactoring some code written with Angular.js, mostly as an attempt to prevent the braces from rendering whilst everything loads. The original code looks like:

<p class="summary">{{ feature.articleSummary }}<a ng-href="/feature/reader/?articleId={{feature.articleId}}" class="summary">...(more)</a></p>

And then attempted refactoring to:

<p class="summary" ng-bind="feature.articleSummary"><a ng-href="/feature/reader/?articleId={{feature.articleId}}" class="summary">...(more)</a></p>

However, this loses the embedded <a> element. Is it possible to bind an element within a binding? Or would it be better to create a directive to handle a new template? Or is there a better way of handling this?

Mr.Web · Accepted Answer · 2015-12-21 11:20:59Z

0

You should first use ng-bind-html instead of the simple ng-bind and then you should create a filter so sanitise the html:

yourApp.filter("sanitize", ['$sce', function($sce) {
    return function(htmlCode){
        return $sce.trustAsHtml(htmlCode);
    }
}]);

So that your code goes like this:

<p class="summary" ng-bind-html="feature.articleSummary | sanitize">...</p>

answered Dec 21, 2015 at 11:20

Mr.Web

7,2078 gold badges56 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular binding within binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related