CODEWITHSUNDEEP
javascriptangularjs
user1447679
user1447679

Reputation: 3270

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

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.

Upvotes: 0

Views: 80

Answers (3)

kyler
kyler

Reputation: 633

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;

Upvotes: 0

Brennan
Brennan

Reputation: 5742

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>

Upvotes: 0

Sebastian Gabriel Vinci
Sebastian Gabriel Vinci

Reputation: 158

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!

Upvotes: 2

Related Questions