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?

Pankaj Parkar · Accepted Answer · 2015-10-22 09:30:42Z

11

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; 
   }
);

answered Oct 22, 2015 at 9:30

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

you can use

ngSanitize

There are 2 steps:

include the angular-sanitize.min.js resource, i.e.:
<script src="lib/angular/angular-sanitize.min.js"></script>
In a js file (controller or usually app.js), include ngSanitize, i.e.:
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

$refrence

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 16, 2017 at 6:26

porya ras

5006 silver badges16 bronze badges

Comments

Kishor Vitekar · Accepted Answer · 2015-10-22 09:36:23Z

0

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);

edited Oct 22, 2015 at 9:36

answered Oct 22, 2015 at 9:35

Kishor Vitekar

5555 silver badges12 bronze badges

Comments

Swapnil Patil · Accepted Answer · 2015-10-22 10:04:30Z

0

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>

edited Oct 22, 2015 at 10:04

answered Oct 22, 2015 at 9:31

Swapnil Patil

9792 gold badges18 silver badges41 bronze badges

1 Comment

Minato Over a year ago

its a function call.. ng-bind-html="chooseHtmlElement()" should be it.

Collectives™ on Stack Overflow

AngularJs Return HTML from Controller

4 Answers 4

Comments

ngSanitize

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

ngSanitize

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related