Как отобразить контент WordPress вместе с изображением, используя php и angularjs? - PullRequest
Новая
       37

Как отобразить контент WordPress вместе с изображением, используя php и angularjs?

0 голосов
/ 21 января 2019

Я пытаюсь отобразить Wordpress содержимое вместе с изображением, используя PHP и angularjs, когда я использую strip_tags для удаления тегов html из данных ответа, я получаю фактическое содержимое, но изображения не отображаются.

Вот результат, который я получаю:

Результат

script.js: 

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

    $scope.word = [];

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

 }
</script>

Модель: 

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;

}

контроллер: 

 public function getword()
 {

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

 }

Вид: 

<div  ng-controller="myctrl">

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

</div>

Вот результат, который я получаю:

Результат

// Снимок экрана Result после изменения успеха на затем в версии 1.6.9:

Снимок экрана веб-браузера Снимок экрана браузера после strip_tags (применяется 'content', '')

Снимок экрана после использования

1 Ответ

0 голосов
/ 21 января 2019

В AngularJS, когда вам нужно отобразить HTML из строк, нельзя просто использовать двойные фигурные скобки для привязки выражения к элементу.Это связано с безопасностью XSS, поэтому AngularJS должен гарантировать, что мы в безопасности.Обычно вместо этого делают: 

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

Мы должны сделать: 

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

Для получения дополнительной информации, пожалуйста, прочитайте это: https://docs.angularjs.org/api/ng/directive/ngBindHtmlИли, если вы используете очень старую угловую версию JS, вы можете попробовать: 

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

==== ОБНОВЛЕНИЕ ======

На самом деле я чувствую себя немного странно с этой строкой кода на вашем: 

$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;
    });

 }

Обычно я делалэто с $http сервисом для получения фактического ответа: 

$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;
    });

 }

==== ОБНОВЛЕНИЕ $http.get() ИСПОЛЬЗОВАНИЕ AngularJS 1.4 ВЫШЕ (ВКЛЮЧАЯ AngularJS 1.6) =====

Поскольку вы используете AngularJS 1.6, я предлагаю сделать следующее: 

$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;
    });

 }

И попробуйте использовать 

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

==== ОБНОВИТЬ HTML-САНИТИЗ. =====

После выполнения strip_tags( $your_content, '<img>' ) и вы обязательно получите ожидаемый ответ.Мне нравится упоминать шаги, которые я пропустил.В вашем контроллере попробуйте включить службу $sce, как показано ниже: 

 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.
        });

 }

В некоторых версиях требуется включить ngSanitize в качестве зависимости в вашем модуле.Так что это что-то вроде: 

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

Но если без этого ваш угол не будет жаловаться, вам не нужно ставить ngSanitize в вашу зависимость.

Пожалуйста, прочитайте больше о $sce at: https://code.angularjs.org/1.6.1/docs/api/ng/service/$sce

...