How to insert HTML into view from AngularJS controller?

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,
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script src="lib/angular/angular-sanitize.min.js"></script>

    chevron_right

    
    

  • In a js file (controller or usually app.js), we must include ngSanitize,
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    angular.module('myApp', ['myApp.filters', 'myApp.services', 
    'myApp.directives', 'ngSanitize'])

    chevron_right

    
    

Parameters:



  • Expressions: Specifies an expression or the value for the evaluation.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.