user38701 user38701 - 9 months ago 28
HTML Question

How to get HTML contains using HTTP Post by Angular JS like Ajax Load

I tried to get HTML contents using Angular Js Post HTTP method. This is working only text contents like P tags. But I want to get Input types HTML contents using Angular JS like text box and so on. When I use Ajax Load syntax, I can get all HTML include input type HTML content also.

Code JS:

$http.post("/user/users_data/about/bidata.php",
{
"type": "get",
"user": "<?php echo $_GET['u']; ?>"
}).then(function(response)
{
$scope.bidata = response.data;
}, function(error)
{
});


HTML Code:

<span ng-bind-html="bidata"></span>


I already added following things above.

var app = angular.module('userapp', ['ngSanitize']);


app.controller('usercontroller', function($scope, $http)


bidata.php file HTML Code:

<div class="form-group row">
<p class="col-2 col-form-label">Text</p>
<div class="col-10">
<input class="form-control" type="text" value="Artisanal kale" >
</div>
</div>
<div class="form-group row">
<p class="col-2 col-form-label">Search</p>
<div class="col-10">
<input class="form-control" type="search" value="How do I shoot web" >
</div>
</div>


Only I can get Text and Search P tags HTML contents.

When I use $scope.bidata =$sce.trustAsHtml( response.data);, I get error in console log.

ReferenceError: $sce is not defined
at ?u=aa:73
at angular.min.js:131
at m.$eval (angular.min.js:145)
at m.$digest (angular.min.js:142)
at m.$apply (angular.min.js:146)
at l (angular.min.js:97)
at J (angular.min.js:102)
at XMLHttpRequest.t.onload (angular.min.js:103)

Answer Source

You have to do 2 things.

Use data-ng-bind-html="" and Use $sce.trustAsHtml(string)

$http.post("/user/users_data/about/bidata.php",
{
    "type": "get", 
    "user": "<?php echo $_GET['u']; ?>"
}).then(function(response) 
{
    $scope.bidata =$sce.trustAsHtml( response.data);
}, function(error) 
{
});

Controller definition

app.controller('usercontroller', function($scope, $http,$sec)

learn more about sec