How to display html content in angularjs

Question

I'm very new to angularjs.

I'm trying to display HTML content on the view using AngularJs. I used ng-model but this is showing HTML contents as string there on view.

Now I'm trying ng-bind-html, this is working for the first time. I'm Trying to append the data dynamically. But data is not coming on view.

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/angular.js" type="text/javascript"></script>
        <script src="node_modules/angular-sanitize/angular-sanitize.js" type="text/javascript"></script>
    </head>
    <body>
        <div style="float: right; width: 60%; height: 500px;" ng-app="myApp" ng-controller="myCtrl">
            <div ng-bind-html="chatdata"></div>
        </div>

        <script>
            var app = angular.module("myApp", ['ngSanitize']);

            var a = "";

            app.controller('myCtrl', function ($scope, $sce) {

                a += "<div style='float: left; width: 70%'>p1 : data1</div>";

                $scope.chatdata = $sce.trustAsHtml(a);

                console.log(a);

                var i = 2;

                var interval = setInterval(function () {

                    if(i === 22 ) {
                        clearInterval(interval);
                    }

                    if (i % 2 === 0) {

                        a = a + "<div style='float: right; width: 70%'>p2 : data" + i +"</div>";
                        $scope.chatdata = $sce.trustAsHtml(a);
                    } else {

                        a = a + "<div style='float: left; width: 70%'>p1 : data" + i +"</div>";

                        $scope.chatdata = $sce.trustAsHtml(a);
                    }
                    console.log(a);
                    console.log($scope.chatdata);
                    i++;
                }, 1000);
            });

        </script>

    </body>
</html>

As you can see in the screenshot data is appending only once.

Sravan · Accepted Answer · 2017-05-24 12:07:11Z

Instead of using $scope.$apply() and run the complete digest cycle, use

$scope.$apply(function(){
  $scope.chatdata
})

Which runs digest cycle for only chatdata

Running $scope.$apply() i,e complete digest cycle affects the performance of the application.

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.js" type="text/javascript"></script>
    </head>
    <body>
        <div style="float: right; width: 60%; height: 500px;" ng-app="myApp" ng-controller="myCtrl">
            <div ng-bind-html="chatdata"></div>
        </div>

        <script>
            var app = angular.module("myApp", ['ngSanitize']);

            var a = "";

            app.controller('myCtrl', function ($scope, $sce) {

                a += "<div style='float: left; width: 70%'>p1 : data1</div>";

                $scope.chatdata = $sce.trustAsHtml(a);

                console.log(a);

                var i = 2;

                var interval = setInterval(function () {

                    if(i === 22 ) {
                        clearInterval(interval);
                    }

                    if (i % 2 === 0) {

                        a = a + "<div style='float: right; width: 70%'>p2 : data" + i +"</div>";
                        $scope.chatdata = $sce.trustAsHtml(a);
                    } else {

                        a = a + "<div style='float: left; width: 70%'>p1 : data" + i +"</div>";

                        $scope.chatdata = $sce.trustAsHtml(a);
                    }
                    console.log(a);
                    console.log($scope.chatdata);
                    $scope.$apply(function(){
                      $scope.chatdata
                    })
                    i++;
                }, 1000);
            });

        </script>

    </body>
</html>

Please run the above SNIPPET

HERE IS A WORKING DEMO

Sravan · Accepted Answer · 2017-05-24 12:09:08Z

1

Try to Use $scope.$apply(); after assigning value to the chat data at the end of your function.

edited May 24, 2017 at 12:09

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

answered May 24, 2017 at 11:53

the_mishra

8339 silver badges24 bronze badges

1 Comment

Shubham Over a year ago

I'll try and let you know. Thanks for the quick response.

Amadou Beye · Accepted Answer · 2017-05-24 12:15:28Z

1

Inject $timeout in your controller and use it when assigning $scope.chatdata value to tell angular a scope has been updated

$timeout(function() {
    $scope.chatdata = $sce.trustAsHtml(a);
});

Working fiddle

answered May 24, 2017 at 12:15

Amadou Beye

2,8583 gold badges21 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to display html content in angularjs

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related