Monday, 7 January 2019

AngularJS ng-bind-html directive


AngularJS ng-bind-html directive


ng-bind-html directive is used to bind resulting HTML into the element securely.
You need to include ngSanitize in your modules to utilize this functionality.
So you must have to call "angular-sanitize.js" in your application to inject the ngSanitize module.

ng-bind-html Example

<!DOCTYPE html>
<html>
<head>
    <title>ng-class Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.5/angular-sanitize.min.js"></script>
  
</head>
<body>
    <div ng-app="myApp1" ng-controller="Employee1Controller">
        <p ng-bind-html="Name"></p>
    </div>

    <script>
        var myapp = angular.module('myApp1', ['ngSanitize']);
        myapp.controller('Employee1Controller', function ($scope) {
            $scope.Name = "angularjs tutorial by:  <h1>code-view!</h1>";
        });
    </script>

</body>
</html>

Output:-