AngularJs Return HTML from Controller

Question

I try to return some HTML code from my AngularJs controller to the html data.

This is path of my html :

<div align="right">
   {{chooseHtmlElement()}}">
</div>

And this is path of my AngularJs Controller:

   $scope.chooseHtmlElement= function () {
        var sum = $scope.chiQuadSum();
        if (isNaN(sum)) {
            return "";
        }
        if (sum > 17.00) {
            return "<i class=\"fa fa-minus-circle\" style=\"color:red;\"></i>";
        } else if (sum < 14.00) {
            return "<i class=\"fa fa-check-circle\" style=\"color:green;\"></i>";
        } else {
            return "<i class=\"fa fa-circle\" style=\"color:orange;\"></i>";
        }
    }

The problem is when I return these string, the element is not shown as html element, but as text which you can read. Is there any possibility returning these string as html element?

Answer 1

While binding html on view in angular js you need to use ng-bind-html directive. But before binding html, you need to sanitize that html by using $sce.trustAsHtml method of ngSanitize module.

<div align="right" ng-bind-html="chooseHtmlElement() | trustedhtml"></div>

Filter

app.filter('trustedhtml', 
   function($sce) { 
      return $sce.trustAsHtml; 
   }
);

Answer 2

you can use

ngSanitize

There are 2 steps:

1. include the angular-sanitize.min.js resource, i.e.:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. In a js file (controller or usually app.js), include ngSanitize, i.e.:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

$refrence

Answer 3

For Sanitizing an html string , Include following module and js in your code,

<script src="//code.angularjs.org/1.4.7/angular-sanitize.js"></script>

angular.module('app', [
  'ngSanitize'
]); 

Bind scope like,

<div align="right" ng-bind-html="chooseHtmlElement()"></div>

Answer 4

Instead of returning element from controller to HTML use $element to add/append content from controller to HTML. Find your DIV element using angular.element.

var tag = your return elements.

var ele = $compile(tag)($scope);
angular.element('div').append(ele);