如何使用php和angularjs顯示wordpress內容和圖像？

Question

我試圖使用PHP和angularjs將Wordpress內容與圖像一起顯示，當我使用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>

這是我得到的結果：

結果

//在版本1.6.9中將成功更改為Result之后的Result的屏幕截圖：

Web瀏覽器 的屏幕截圖strip_tags（'content'，''被應用后，瀏覽 器 的屏幕截圖）

使用后的屏幕截圖

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

 }

====使用AngularJS 1.4以上（包括AngularJS 1.6）更新$http.get()

由於您使用的是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 SANITIZE =====

完成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更多信息： https : //code.angularjs.org/1.6.1/docs/api/ng/service/$sce