如何使用 php 和 angularjs 显示 wordpress 内容和图像？答案

【问题标题】：How to display wordpress content along with image using php and angularjs?如何使用 php 和 angularjs 显示 wordpress 内容和图像？
【发布时间】：2019-06-14 18:50:42
【问题描述】：

我正在尝试使用PHP 和angularjs 显示Wordpress 内容和图像，当我使用strip_tags 从响应数据中删除html 标记时，我得到了实际内容，但图像没有显示。

这是我得到的结果：

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>

型号：

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版本将success改为then后的Result截图：

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

Screen shot after using

【问题讨论】：

为什么要混合 PHP 和 AngularJS？通常你使用其中一个。
顺便说一句：我建议将您的代码粘贴到您的帖子中（格式化为代码） - 代码图像非常不舒服（并且无法复制和测试）。
根据您的建议，我复制粘贴代码，请检查代码。

标签： php angularjs wordpress script-tag

【解决方案1】：

在 AngularJS 中，当你需要从字符串中显示 HTML 时，不能只使用双花括号将表达式绑定到元素。这是由于 XSS 安全性，所以 AngularJS 需要确保我们以安全的方式。通常，改为：

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

我们应该这样做：

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

欲了解更多信息，请阅读：https://docs.angularjs.org/api/ng/directive/ngBindHtml

或者，如果您使用的是非常旧的 Angular 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 放在你的依赖中。

请在https://code.angularjs.org/1.6.1/docs/api/ng/service/$sce阅读更多关于$sce的信息

【讨论】：