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:
