Angular: Binding an HTML value

To bind an HTML value to ng-bind-html, you need to mark it as "trusted" first. Among other ways, you can do so with a custom filter.

# Filter in Coffeescript...:
@app.filter 'htmlSafe', ['$sce', ($sce) -> $sce.trustAsHtml ]

# ...or JS:
app.filter('htmlSafe', [
  '$sce', function($sce) {
    return $sce.trustAsHtml;
  }
]);

# Usage:
<div ng-bind-html="item.value | htmlSafe"></div>

This is a replacement for the ng-bind-html-unsafe directive which has been removed in Angular 1.2.

:party:

Thomas Klemm

Say thanks2

Last edit

Over 9 years ago

Thomas Klemm

License

Source code in this card is licensed under the MIT License.

Angular: Keeping attributes with invalid values in an ngModel

The Angular 1.2 way:

# By default, angular returns undefined for invalid attributes which removes
# the value from the form field's ngModel (which means it's not sent to the
# server, and old values would not be overwritten).
#
# This directi...

Angular: Understanding how parent and child scope meet on a directive declaration

This cards needs to be rewritten.

Say you have the following markup:

{{ someParentVariable = 42 }}

<child var="{{ someParentVariable }}" ng-click="foo()">
  {{ var }}
</child>

Any angular expression on the child elem...

Angular directive scope binding with = (equals)

Angular directives with isolate scopes have three different variable binding strategies, of which one is =. Example:

# HTML
<panel value="parent.someFn() && false" twoway="parent.someProperty"></div>

# Coffeescript
@app.directive 'panel', ...

Posted by Thomas Klemm to makandra dev (2014-11-13 18:04)

Angular: Binding an HTML value

Related cards: