How to display wordpress content along with image using php and angularjs?

Question

I'm trying to display Wordpress content along with image using PHP and angularjs , when I use strip_tags to remove html tags from the response data I get the actual content but images are not displaying.

Here is the result I get:

Result

script.js:

<script>
 function myctrl($scope,$http){

    $scope.word = [];

    $http.get('<?php echo site_url('Home/getword'); ?>').success(function($data){
 $scope.word=$data; });

 }
</script>

Model:

public function getword()
{


  $this->db->select('post_content');
  $this->db->from('wp_posts');
  $this->db->where(array('ID' => 22));


  $query = $this->db->get();
  $result = $query->result_array();

  foreach ($result as $key) {
    $record = $key;
  }
  return $record;

}

controller:

 public function getword()
 {

  $data = $this->Data_model->getword();
  $this->output->set_content_type('application/json')->set_output(json_encode($data));

 }

View:

<div  ng-controller="myctrl">

    <span>{{word}}</span>

</div>

This the result I am getting:

Result

// The screen shot of Result after changing the success to then in version 1.6.9:

The screen shot of the web browser The screen shot of the browser after strip_tags('the content', '' is applied)

Screen shot after using

Answer 1

In AngularJS, when you need to display HTML from strings, it can't be just using double curly braces to bind expression to an element. This is due to XSS security, so AngularJS need to ensure that we are in secure way. Usually, instead do:

<span>{{word}}</span>

We should do:

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

For more information, please read this: https://docs.angularjs.org/api/ng/directive/ngBindHtml


Or if you are using a very old angular JS version, you could try:

<span ng-bind-html-unsafe="word"></span>

====UPDATE======

Actually I feel bit strange with this line of code on yours which is:

$http.get('<?php echo site_url('Home/getword'); ?>')
    .success(function($data){
        console.log($data);//Please try to check if $data really give you actual response from server
        $scope.word=$data;
    });

 }

Usually I did this with $http service to get actual response:

$http.get('<?php echo site_url('Home/getword'); ?>')
    .success(function($response){
        console.log($response.data);//Please try to check this too and compare with your current code
        $scope.word=$response.data;
    });

 }

==== UPDATE $http.get() USING AngularJS 1.4 ABOVE ( INCLUDE AngularJS 1.6 ) =====

Since you are using AngularJS 1.6, I suggest to do as follow:

$http.get('<?php echo site_url('Home/getword'); ?>')
    .then(function($response){//Using .then() instead .success()
        console.log($response.data);//Please give me result of this
        $scope.word=$response.data;
    });

 }

And keep try using

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

====UPDATE HTML SANITIZE =====

After doing strip_tags( $your_content, '<img>' ) and you sure get expected response. I like to mention the steps I missed. In your controller please try to include $sce service like below:

 function myctrl($scope, $http, $sce){

    $scope.word = [];

    $http.get('<?php echo site_url('Home/getword'); ?>')
        .success(function($response){
            $scope.word= $sce.trustAsHtml( $response.data );//Just match with your current way about `$response.data` not have to follow this.
        });

 }

In some versions, it is required to include ngSanitize as dependency in your module. So it is something like:

angular.module( 'App', [ 'ngSanitize', 'yourOtherDependency' ] )

But if without that your angular not complain, you don't have to put ngSanitize in your dependency.

Please read more about $sce at: https://code.angularjs.org/1.6.1/docs/api/ng/service/$sce