How do I return HTML to shown as HTML and not as text when using $http Angular

Question

I've been stuck on this for days.

Basically I have a $http.post with Angular, posting an e-mail address and message to be emailed from post.php. Post.php is then echoing text depending on the result of the mail(), but when I return

Success

for example, it will actually show the HTML on the DOM instead of process it.

Appreciate any help.

app.controller('contactsController', function($scope, $rootScope, $http) {

        $rootScope.currentPage = "contact";
        $scope.postData = {};
        $scope.data = "Send";

        $scope.runScript = function() {
            $http({
                url: "post.php",
                method: "POST",
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                data: $.param({"postData":$scope.postData})
            }).success(function(data) {
                $scope.data = data;
                console.log(data);
                $scope.contactForm.$valid = false;
            }).error(function(data, status, headers, config) {
                $scope.status = status;
            });

        };
    });
<?php

// get the raw POST data

$inputData = $_POST['postData'];

if(isset($inputData["email"])&&isset($inputData["message"])) {

    $email = $inputData["email"];
    $message = $inputData["message"];

    $to = "[email protected]"; // required

    $from = $email; // required

    $body = $message;

    $subject = "Online Query Submission";


// create email headers

    if(mail($to,$subject,$body,"From:$from/r/nReply-to:$from"))
        echo "<p>Success - Thanks!</p>";
    else
        echo "<p>Error - Sorry!</p>";

}

 ?>

Personally I would have just returned text from the server without the HTML so that way, if I wanted to change the presentation later, I wouldn't have to worry about the server or data, it would just be the markup itself. — Chris
– Chris, Commented Feb 23, 2015 at 1:14

Manube · Accepted Answer · 2015-02-22 23:15:05Z

2

I believe you should use ng-bind-html in your view, like so:

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

as you attribute the message returned from the server to a controller $scope variable, like so:

$http(url).success(function(data){
$scope.data=data;
});

From angularjs doc about ngBindHtml,

ng-bind-html evaluates the expression and inserts the resulting HTML into the element in a secure way

edited Feb 22, 2015 at 23:15

answered Feb 22, 2015 at 23:03

Manube

5,2294 gold badges38 silver badges61 bronze badges

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

1 Comment

Marshall Over a year ago

Anybody else struggling with this, don't forget to check Docs regarding ng-bind-html. It requires ngSanitize as dependency. Thanks!

Community · Accepted Answer · 2017-05-23 11:50:59Z

0

You can possibly find what you want here AngularJS : Insert HTML into view

However, I think it will be a good practice to make PHP return just a confirmation text and formate it on the front end using Angular.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Feb 22, 2015 at 23:08

fons

941 silver badge4 bronze badges

Comments

Marshall · Accepted Answer · 2015-02-22 23:26:48Z

0

Although everybody has helped fantastically, ng-bind-html="data" was part of the problem.

The remaining problem was that I didn't realise ngSanitize was a requirement, get it in as a dependency and it works perfect :)

I believe there is a quicker way to bypass ngSanitize, something like $sce.trustAsHtml, but not considered a good practice I believe.

edited Feb 22, 2015 at 23:26

answered Feb 22, 2015 at 23:15

Marshall

1569 bronze badges

3 Comments

Manube Over a year ago

you mean you had used it in your html, and had not mentioned it?

Marshall Over a year ago

As I was investigating your helpful answer in Docs, I realised it needs ngSanitize - I had tried it before although thought I probably didn't use it correctly. Thanks for your answer.

Manube Over a year ago

and thank you for the $sce.trustAsHtml trick, good to know :) Maybe not as safe as ng-bind-html, but with a <p>message</p>, there is not much of a risk anyway

Collectives™ on Stack Overflow

How do I return HTML to shown as HTML and not as text when using $http Angular

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related