AngularJS $http put raw HTML element in the body

Question

test.html

<html>
<body ng-app="myApp" ng-controller="myCtrl">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

  <p>Response from process.php is : {{message}}</p>

  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope, $http){
      $http({
        method : "post",
        url : "process.php"
      })
      .then(function(response){
        // First function handle success
        $scope.message = response.data;
      }, function(response){
        // Second function handle error
        $scope.message = response.status +' ('+ response.statusText + ' )';
      })
    });
  </script>
</body>
</html>

process.php

<?php
    $data = "<h1>Hey, how are you...???</h1>";
    echo $data;
?>

Response from process.html is : <h1>Hey, how are you...???</h1>

You can see that the output is not as expected. It puts the h1 element in the body. But the output should be an heading. How can I do this..?? Any suggestions please.

SOLVED

<div ng-bind-html="messageHtml"></div>

    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope, $http, $sce){
           $http({
                method : "post",
                url : "process.php"
              })
              .then(function(response){
                 // First function handle success
                 $scope.message = response.data;
                 $scope.messageHtml = $sce.trustAsHtml($scope.message)
               }, function(response){
                  // Second function handle error
                  $scope.messageHtml = response.status +' ('+ response.statusText + ' )';
              })
          });
    </script>

Use ng-bind-html From docs.angularjs.org/api/ng/directive/ngBindHtml — Hardik Vaghani
– Hardik Vaghani, Commented Dec 8, 2016 at 7:22

Hardik Vaghani · Accepted Answer · 2016-12-08 09:29:12Z

2

Found solution

I have to use $sce with ng-bind-html .

HTML

<p ng-bind-html="messageHtml"></p>

Controller

$scope.message = response.data;
$scope.messageHtml = $sce.trustAsHtml($scope.message)

edited Dec 8, 2016 at 9:29

Hardik Vaghani

2,18330 silver badges48 bronze badges

answered Dec 8, 2016 at 5:42

Rahul Sarkar

892 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kva · Accepted Answer · 2016-12-08 05:29:17Z

1

you can use ng-bind-html like this

<p ng-bind-html="message" ></p>

answered Dec 8, 2016 at 5:29

kva

741 silver badge7 bronze badges

1 Comment

Rahul Sarkar Over a year ago

Tried, but No output

Sunny S.M · Accepted Answer · 2016-12-08 06:00:53Z

1

Check This code :

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope, $http,$sce){
      $http({
        method : "post",
        url : "process.php"
      })
      .then(function(response){
        // First function handle success
        $scope.message = $sce.trustAsHtml(response.data);
      }, function(response){
        // Second function handle error
        $scope.message = response.status +' ('+ response.statusText + ' )';
      })
    });
  </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <p>Response from process.php is : <span ng-bind-html="message"></span></p>
</body>
</html>

answered Dec 8, 2016 at 6:00

Sunny S.M

6,0261 gold badge40 silver badges38 bronze badges

2 Comments

Rahul Sarkar Over a year ago

Yes this is correct, I already answered this code above. Thanks bdw

Sunny S.M Over a year ago

More important is, your problem fixed, Thanks

Kalpesh Patel · Accepted Answer · 2016-12-08 05:31:14Z

0

You have to use ng-bind-html directive.

Ref: https://docs.angularjs.org/api/ng/directive/ngBindHtml

<p>Response from process.php is : </p><div ng-bind-html="message"></div>

answered Dec 8, 2016 at 5:31

Kalpesh Patel

2,8202 gold badges28 silver badges54 bronze badges

2 Comments

Rahul Sarkar Over a year ago

Tried, but No output

Kalpesh Patel Over a year ago

What error, are you getting..$sanitize service must be loaded

SaoBiz · Accepted Answer · 2016-12-08 06:01:12Z

0

I have created a directive for just this scenario. You need to have angular-sanitize included in your project.

(function () {
    'use strict';

    angular
        .module('yourModule')
        .filter('to_trusted', ['$sce', function ($sce) {
            return function (text) {
                return $sce.trustAsHtml(text);
            };
        }]);
})();

Then in your HTML, you can write:

<p>{{message | to_trusted}}</p>

answered Dec 8, 2016 at 6:01

SaoBiz

1,24915 silver badges16 bronze badges

Collectives™ on Stack Overflow

AngularJS $http put raw HTML element in the body

5 Answers 5

Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related