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

Question

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)

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) — user38701
– user38701, Commented Mar 12, 2017 at 3:47

Abdullah Al Noman · Accepted Answer · 2020-11-19 11:13:26Z

2

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,$scc)

learn more about sce

edited Nov 19, 2020 at 11:13

answered Mar 12, 2017 at 3:21

Abdullah Al Noman

2,8884 gold badges22 silver badges37 bronze badges

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

4 Comments

user38701 Over a year ago

If i put $sce.trustAsHtml( response.data), I get nothing.

user38701 Over a year ago

Console log says ReferenceError: $sce is not defined

Abdullah Al Noman Over a year ago

yeah you have to define it with $http ,$sce in your controller

Ted Scheckler Over a year ago

you typo'ed $sce as $sec

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related