当我使用Wordpress
从响应数据中删除html标签时,我尝试使用PHP
和angularjs
来显示strip_tags
内容和图像。实际内容,但没有显示图像。
这是我得到的结果:
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的屏幕截图:
The screen shot of the web browser The screen shot of the browser after strip_tags('the content', '' is applied)
答案 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
的更多信息