CODEWITHSUNDEEP
javascriptangularjsdata-binding
user1741851
user1741851

Reputation:

One way HTML binding in angularjs

I used to go with ng-bind (or shorthand {{}}) for binding some text into a span.

<p>Preview: <span>formattedPrice(price)</span></p>

As you can see, I had a function call formattedPrice while binding. Now I realize I should be able to add some HTML into this span. I tried ng-bind-html="formattedPrice(price)" but that doesn't seem to cut it.

Is there a way I can do it without creating another scope variable?

Upvotes: 0

Views: 419

Answers (2)

bmleite
bmleite

Reputation: 26880

Make sure your app loads the ngSanitize module:

angular.module('app', ['ngSanitize'])

And on the HTML (example):

<script src="<PATH_TO>/angular-sanitize.js"></script>

Without this module Angular will not be able to correctly parse the HTML you want to render.

Demo

Upvotes: 0

johnny
johnny

Reputation: 165

You should use a filter.

Like this:

<p>Preview: <span>{{price | formatted}}</span></p>

example filter:

angular.module('myFilters', []).filter('formatted', function() {
  return function(input) {
    //return your formatted price here
  }
}

Upvotes: 1

Related Questions