如何使用php和angularjs显示wordpress内容和图像?

时间:2019-01-21 11:26:19

标签: php angularjs wordpress script-tag

当我使用Wordpress从响应数据中删除html标签时,我尝试使用PHPangularjs来显示strip_tags内容和图像。实际内容,但没有显示图像。

这是我得到的结果:

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版本中将成功更改为Result之后的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

1 个答案:

答案 0 :(得分:0)

在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放在依赖中。

请访问https://code.angularjs.org/1.6.1/docs/api/ng/service/$sce

了解有关$sce的更多信息