CODEWITHSUNDEEP
javascripthtmlangularjs
Bou Rif Abdou
Bou Rif Abdou

Reputation: 3

How to make ng-bind-html angularjs code

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

{{item.description}}

not working

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

Upvotes: 0

Views: 366

Answers (2)

cccross
cccross

Reputation: 76

"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-

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222522

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>

Upvotes: 0

Related Questions