Angular : How Inject html from controller

Question

Something like this:

I would like to inject html from my controller to my scope without escaping it:

$scope.results = (typeof data.Clients[0] === 'undefined') ? '<span class="badge badge-important">No result</span>' : data.Clients[0].results+' Result(s)';

Doing any UI related work in controller isn't good. Consider use directive instead. — Ye Liu, CommentedJun 7, 2013 at 16:03

Narretz · Accepted Answer · 2013-06-07 16:23:44Z

don't inject html from the controller. This should look like e.g. so in the template:

<span ng-hide="angular.isDefined(results)">No result</span> <span ng-show="angular.isDefined(results)">{{results}} Result(s)</span>

In angular, you cleanly separate the template from the business layer.

It is possible to output raw html, but you are going against everything Angular stands for if you do this. You are also making you own life harder.

<span ng-bind-html-unsafe="results"></span>

"Going against everything Angular stands for" -- a bit excessive, don't you think? Personally I have a text blob that comes in as Markdown and I need to write out HTML. — SomeCallMeTim, CommentedOct 14, 2016 at 21:19
Then you should use a directive to insert it, not a controller. — Narretz, CommentedOct 19, 2016 at 10:08

Jade Hamel · Accepted Answer · 2013-06-08 00:18:34Z

Even if it's not a good pratice to inject html from controller the best way to doing this is

<span ng-bind-html-unsafe="results"></span>

It worked very well for me

Collectives™ on Stack Overflow

Angular : How Inject html from controller

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related