AngularJS - html elements injected from controller are being wrapped in quotes/treated as strings

Question

If I have a simple user status dropdown, such as:

<a class="dropdown-toggle">
   {{userStatus}}
</a>
<ul class="dropdown-menu" role="menu">
    <li data-ng-click="SwitchStatus('Online')"><i class="fa fa-circle text-green2 pr5"></i> Online</a></li>
    <li data-ng-click="SwitchStatus('Busy')"><i class="fa fa-circle text-red2 pr5"></i> Busy</li>
    <li data-ng-click="SwitchStatus('Away')"><i class="fa fa-circle text-orange2 pr5"></i> Away</li>
</ul>

And the controller has this:

var userStatuses = {
    online: '<i class="fa fa-circle text-green2 pr5"></i>',
    busy: "<i class='fa fa-circle text-red2 pr5'></i>",
    away: "<i class='fa fa-circle text-orange2 pr5'></i>"
};

$scope.userStatus = userStatuses.online; // default online

Why does it inject the HTML into the page like this:

<a class="dropdown-toggle">
    "<i class='fa fa-circle text-green2 pr5'></i>"
</a>

What can I do so that it injects it as an HTML element and not a string?

Also, it's obvious what I'm trying to achieve, and I have just started with angular, so feel free to point me in another direction. I want to eventually incorporate advanced logic when the different statuses are selected.

Thank you.

Sebastian Gabriel Vinci · Accepted Answer · 2014-09-16 20:42:27Z

2

In that specific case I would use ng-class instead of pasting HTML in the template.

AngularJS isn't jquery.

see:

<a class="dropdown-toggle">
  <i class='fa fa-circle pr5' ng-class="{'text-green2': userStatuses.online, 'text-red2': userStatuses.busy, 'text-orange2': userStatuses.away}"></i>
</a>

and the JavaScript

var userStatuses = {
  online: true,
  busy: false,
  away: false
};
scope.userStatuses = userStatuses;

Hope this whas helpfull. Good Luck!

answered Sep 16, 2014 at 20:42

Sebastian Gabriel Vinci

15811 bronze badges

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

6 Comments

user1447679 Over a year ago

Thank you. I will use this. I'm still curious however, to understand why it was injected as HTML?

user1447679 Over a year ago

Speaking of your jQuery comment, this has been the biggest struggle for me so far is doing things the "Angular Way"... I've only been at this a few days.

Sebastian Gabriel Vinci Over a year ago

It's a js string, not an HTML element, if you could paste a string as HTML just like that, the model's field couldn't have characters like "<" or ">", or the view would all be messed up.

Brennan Over a year ago

As mentioned in my answer, Angular won't render HTML in a ng-bind or similar directives to prevent XSS. If you want to render HTML as actual HTML, you should be using the ng-bind-html directive. That said, this answer solves this problem better than mine.

kyler Over a year ago

@SebastianGabrielVinci Ah, you beat me to it.

|

Brennan · Accepted Answer · 2014-09-16 20:45:52Z

0

This is a use-case for ng-bind-html. Angular doesn't like inserting HTML unless explicitly told to do so, so as to prevent XSS vulnerabilities.

Your dropdown should look like:

<a class="dropdown-toggle" ng-bind-html="userStatus"></a>

answered Sep 16, 2014 at 20:45

Brennan

5,7822 gold badges20 silver badges24 bronze badges

Comments

kyler · Accepted Answer · 2014-09-16 20:50:36Z

Perhaps I think a better way would be to keep your html out of your controller and try using ng-class to change the class of your icon based on the userStatus object:

<a class="dropdown-toggle">
   <i class="fa fa-circle pr5"
      ng-class="{{ 'text-green2' : userStatus.online,
                   'text-red2' : userStatus.away,
                   'text-orange2': userStatus.busy }}">
   </i>
</a>

In the controller, skip the var declaration you're using and do this

$scope.userStatus = userStatus;

Collectives™ on Stack Overflow

AngularJS - html elements injected from controller are being wrapped in quotes/treated as strings

3 Answers 3

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Related