How to use AngularJS to Display HTML content value ?
The ng-bind-html Directive is used to bind the innerHTML of an HTML element to application data and remove dangerous code from the HTML string. $sanitize service is a must for ng-bind-html directive. It is supported by all HTML elements.
Syntax:
<element ng-bind-html="expression"> Contents... </element>
Approach:
- Initialize the libraries that we are using. Here, we are mainly use angular-sanitize.js library.
- Create app and its controller scope.
- Define the contoller variable.
- Call the app and controller to body of html.
- Inside the body use span tag and use attribute ng-bind-html and assign the value as the scope variable.
Example:
<html> <head> <meta charset= "utf-8" > </head> <body ng-app= "myApp" ng-controller= "myCtrl" > <span ng-bind-html= "message" ></span> <script src= charset= "utf-8" > </script> <script src= charset= "utf-8" > </script> <script type= "text/javascript" > var app=angular.module( 'myApp' ,[ 'ngSanitize' ]); app.controller( 'myCtrl' , function ($scope){ $scope.message = '<h1>GeeksforGeeks</h1>' ; }); </script> </body> </html> |
chevron_right
filter_none
Output: