Blog on software engineering
How to show html embeded inside JSON to the user with AngularJS and ngSanitize.

How to show html embeded inside JSON to the user with AngularJS and ngSanitize.

 

image

 

I want to show HTML to the user, that was stored in a SQL Server Database. The data was queried from the SQL Server Database by using Entity Framework, then the C# model was converted to JSON, by using JSON.net and send to the browser by the ASP .NET web api service.

To show this HTML to the user with AngularJS, I used ngSanitize and the ng-bind-html directive:

(at this moment plunker is down, so I will edit this post in the future to add a plunker).

 

If the HTML contains angular bindings / directives, you can use the compile service to bind the scope to the html fragment:

https://docs.angularjs.org/api/ng/service/$compile

So instead of using the ng-bind-html, you can use this directive:

https://github.com/incuna/angular-bind-html-compile/blob/master/angular-bind-html-compile.js

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike">
<head>
    <!-- Why is angular added to the html tag? Because IE8 won't work without it. -->
    <title>Spike page</title>
    <meta charset="utf-8">
    <!-- Why is "edge" used? Because we want the highest support for modern standards. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Library scripts -->
    <!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>

    <!-- Live reload script with grunt. -->
    <!--<script src="http://localhost:35729/livereload.js"></script>-->

    <!-- App styles -->
    <style>
        /*
            A small custom reset stylesheet is used, to fix style differences between browsers.
        */
        html, body
        {
            height: 100%;
        }

        body, div, p, ul, li, button
        {
            border: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-family: "Open Sans", sans-serif;
            margin: 0;
            outline: 0;
            padding: 0;
        }

        body
        {
            background-color: #F1F1F1;
            padding: 20px;
        }

        .spike-title
        {
            color: #393939;
        }

        .spike-content
        {
            color: #393939;
        }
        .spike-content-with-class
        {
            color: #ff0000;
        }
    </style>

    <!-- App scripts -->
    <script>

        (function ()
        {
            "use strict";

            var app = angular.module("spike", ["ngAnimate", "ngSanitize"]);
        }());

        (function ()
        {
            "use strict";

            var app = angular.module("spike");

            var controller = function ($scope)
            {
                $scope.title = "How to show html embeded inside JSON to the user with AngularJS and ngSanitize.";

                var json = '{ \"html\":\"<br><br><p>Some html in JSON.</p><br><br><p class=\\"spike-content-with-class\\">Some html in JSON with a class attribute.</p>\" }';
                var content = JSON.parse(json);

                $scope.content = content.html;
            };

            app.controller("main", ["$scope", controller]);
        }());
    </script>
</head>
<body>
    <div ng-controller="main">
        <h2 class="spike-title">{{ title }}</h2>
        <div class="spike-content" ng-bind-html="content"></div>
    </div>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.