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 = "XXXXXXXXXXXXX@XXXXXXXXXX.COM"; // 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, Feb 23 '15 at 01:14

Manube · Accepted Answer · 2015-02-22T23:15:05.333

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 '15 at 23:15

answered Feb 22 '15 at 23:03

Manube

5,110
3
35
59

Anybody else struggling with this, don't forget to check Docs regarding ng-bind-html. It requires ngSanitize as dependency. Thanks! – Marshall Feb 22 '15 at 23:21

score 0 · Answer 2 · edited May 23 '17 at 11:50

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 '17 at 11:50

Community

1
1

answered Feb 22 '15 at 23:08

fons

94
1
4

Marshall · Answer 3 · 2015-02-22T23:26:48.330

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 '15 at 23:26

answered Feb 22 '15 at 23:15

Marshall

156
9

you mean you had used it in your html, and had not mentioned it? – Manube Feb 22 '15 at 23:17
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. – Marshall Feb 22 '15 at 23:20
1

and thank you for the $sce.trustAsHtml trick, good to know :) Maybe not as safe as ng-bind-html, but with a
message
, there is not much of a risk anyway – Manube Feb 22 '15 at 23:21

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

3 Answers3