Binding Controller Property containing HTML in AngularJS

Question

First of all: I am absolutely new to AngularJS but worked on MVC-projects in other languages.

I try to bind a Property containing HTML.

This is the code:

HTML:

<div ng-controller="MyController">
<p>{{About}}</p>
</div>

JS:

.controller('MyController', ['$scope', function($scope) {
$scope.About="This is me<br/>and not you!"
}

Now the HTML is encoded which I do not want (the <br/> should result in line breaks)

I already tried <p ng-bind-html="About"></p> but that resulted in no output at all

mccainz · Accepted Answer · 2014-10-17 16:16:38Z

2

You need to allow html in your text which Angular does not by default.

Plunker: http://plnkr.co/edit/K4KRCQi4Rpe99MJel5J2?p=preview

Angular Docs for $sce

Strict Contextual Escaping (SCE) is a mode in which AngularJS requires bindings in certain contexts to result in a value that is marked as safe to use for that context. One example of such a context is binding arbitrary html controlled by the user via ng-bind-html. We refer to these contexts as privileged or SCE contexts.

<div ng-controller="htmlChar" ng-bind-html="about"></div>

<script>

  angular.module("app",[])
  .controller("htmlChar",function($scope, $sce){
     $scope.about= $sce.trustAsHtml("This is me<br/>and not you!");
  });

  angular.bootstrap(document,["app"]);

</script>

edited Oct 17, 2014 at 16:16

answered Oct 17, 2014 at 15:51

mccainz

3,5075 gold badges37 silver badges47 bronze badges

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

Comments

Roberto Linares · Accepted Answer · 2014-10-17 15:39:01Z

1

You shoudln't need to insert html through model binding in AngularJS since the philosophy of the framework is to keep the HTML (page's structure and style) intact and only bind the data to be shown inside that HTML.

If you really need to bind HTML tags into your data you need to use the $sanitize service.

answered Oct 17, 2014 at 15:39

Roberto Linares

2,2253 gold badges23 silver badges35 bronze badges

Comments

Geo Jacob · Accepted Answer · 2014-10-17 15:44:47Z

0

You have to use angular compile functionality here, go through the link to get more information angular compile

answered Oct 17, 2014 at 15:44

Geo Jacob

6,0291 gold badge39 silver badges46 bronze badges

Collectives™ on Stack Overflow

Binding Controller Property containing HTML in AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related