How to make ng-bind-html angularjs code

Question

i have to pass html code by angullar js data

 this.items = [
  {
    'title': 'Angular',
    'icon': 'angular',
    'description': " <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.",
    'color': '#E63135'
  },
  {
    'title': 'CSS3',
    'icon': 'css3',
    'description': '<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>  The latest version of cascading stylesheets - the styling language of the web!',
    'color': '#0CA9EA'
  },
  {
    'title': 'HTML5',
    'icon': 'html5',
    'description': 'The latest version of the web\'s markup language.',
    'color': '#F46529'
  },]

bu in the view html

not working

ng-bind-html="item.description"
not working

cccross · Accepted Answer · 2017-07-06 02:43:10Z

1

"By default, the resulting HTML content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available" In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application.

You may also bypass sanitization for values you know are safe. To do so, bind to an explicitly trusted value via $sce.trustAsHtml. See the example under Strict Contextual Escaping (SCE).

https://docs.angularjs.org/api/ng/directive/ngBindHtml

https://docs.angularjs.org/api/ng/service/$sce#show-me-an-example-using-sce-

answered Jul 6, 2017 at 2:43

cccross

767 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2017-07-06 02:42:27Z

Use the filter with $sce.trustAsHtml

 myApp.filter('trustHtml',function($sce){
  return function(html){
    return $sce.trustAsHtml(html)
  }
})

DEMO

var myApp=angular.module('myApp',[]);
 myApp.controller('thecontroller',function(){
  
  this.items = [
  {
    'title': 'Angular',
    'icon': 'angular',
    'description': " <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.",
    'color': '#E63135'
  },
  {
    'title': 'CSS3',
    'icon': 'css3',
    'description': '<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>  The latest version of cascading stylesheets - the styling language of the web!',
    'color': '#0CA9EA'
  },
  {
    'title': 'HTML5',
    'icon': 'html5',
    'description': 'The latest version of the web\'s markup language.',
    'color': '#F46529'
  }];
  
});
 myApp.filter('trustHtml',function($sce){
  return function(html){
    return $sce.trustAsHtml(html)
  }
})

<!DOCTYPE html>
    <html>
        <head>
          <title>ng-Messages Service</title>
          <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
            <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
        </head>
        <body ng-app="myApp">
            <div ng-controller='thecontroller as vm'>
                <div ng-repeat="item in vm.items ">
                 <div ng-bind-html="item.description |  trustHtml"></div>
                </div>
            </div>
        </body>
    </html>

Collectives™ on Stack Overflow

How to make ng-bind-html angularjs code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related