How to insert HTML into view from AngularJS controller?
Last Updated :
19 Feb, 2020
The ng-bind-html directive is a secure way of binding content to an HTML element. So in order to insert HTML into view, we use the respective directive.
While using AngularJS, write HTML in our corresponding application, we should check the HTML for dangerous or error prone code. By including the “angular-sanitize.js” module in the application we can do so by running the HTML code through the ngSanitize function.
Syntax:
<element ng-bind-html="expression"></element>
ngSanitize:
It constitutes of 2 steps:
- Include the angular-sanitize.min.js resource,
<script src="lib/angular/angular-sanitize.min.js"></script>
|
- In a js file (controller or usually app.js), we must include ngSanitize,
angular.module('myApp', ['myApp.filters', 'myApp.services',
'myApp.directives', 'ngSanitize'])
|
Parameters:
- Expressions: Specifies an expression or the value for the evaluation.
Example 1:
<html>
<script src=
</script>
<script src=
</script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
<p ng-bind-html="myText">
</p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "GeeksForGeeks: <h1>Hello!</h1>";
});
</script>
<p><b>Note:</b> This example includes the "angular-sanitize.js",
which has functions for removing potentially
dangerous tokens from the HTML.</p>
</body>
</html>
|
Output:
Example 2:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>ng-bind-html Directive</title>
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
</script>
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js">
</script>
<style>
.green {
color: green;
font-size: 20px;
}
</style>
</head>
<body ng-controller="geek" style="text-align:center">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2 style="">ng-bind-html Directive</h2>
<p ng-bind-html="text"></p>
<script>
var myApp = angular.module("myApp", ['ngSanitize']);
myApp.controller("geek", ["$scope", function($scope) {
$scope.text =
"<span class='green'> GeeksforGeeks</span> is the"
+ " computer science portal for geeks.";
}]);
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...