Angular JS – Binding HTML and CSS Class

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular JS</title>
</head>
<body>
    <style>
        .box
        {
            display: block;
            width: 100px;
            height: 100px;
        }
 
        .red
        {
            background-color: red;
        }
 
        .blue
        {
            background-color: blue;
        }
    </style>
 
    <div data-ng-app="myApp" data-ng-controller="myController">
 
        <!--
            I can bind the HTML content of an element with the "data-ng-bind-html"
            directive. To do this I must include the sanitization JS and add it
            as a dependancy to the app. The sanitization service check that the
            HTML code is safe (not containing scripts or others XSS exploits)
            -->
        <h3>Binding HTML content</h3>
        <p>
            HTML content:
            <input type="text" data-ng-model="htmlContent" />
        </p>
        <div data-ng-bind-html="htmlContent">
        </div>
        <hr />
 
        <!--
            I can bind the class with the "data-ng-class" directive
            -->
        <h3>Binding class</h3>
        <p>
            <div data-ng-class="'box ' + myClass">
            </div>
        </p>
        <button data-ng-click="changeColour()">Change colour</button>
    </div>
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>
 
    <script>
        var app = angular.module("myApp", ["ngSanitize"]);
 
        app.controller("myController", function ($scope) {
            $scope.htmlContent = "HTML content <strong>strong text</strong>";
            $scope.myClass = "red";
            $scope.changeColour = function () {
                $scope.myClass = ($scope.myClass == "red" ? "blue" : "red");
            }
        });
    </script>
</body>
</html>

Binding HTML without limitations

Ok, using the sanitization we can bind some HTML to our view. But can we really bind any HTML content? Of course no. Angular is checking behind the scenes and will automatically remove the HTML parts that he doesn’t like, preventing them to be rendered. So, how to do in these particular cases? It’s a bit more complicated.. first of all we have to create this function within our controller:

angular.module("myApp.myControllers").controller("myController", ["$scope", "$sce", function ($scope, $sce) {
    $scope.trustAsHtml = function (html) {
        return $sce.trustAsHtml(html)
    };
}]);

With this function we are telling Angular to trust us and just to render the HTML we are telling him to render. Now we are ready to render whatever we want just using the new function in this way:

<div class="content" ng-bind-html="trustAsHtml(html)">
</div>

Binding class name based on a condition

I can use the ngClass directive to define a mapping between the result of a condition and a class name. An interesting thing is that I can still use the normal class attribute for the constant part. The mapping is represented by a JS object for which each property name is a possible class name and the correspondent value is the related condition.

<div class="box" ng-class="{'type1': value=1, 'type2': value=2}">
</div>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s