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)

Answers 1

  • 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


Related Articles