$sce 服务，设置服务器传来的数据为可渲染的html数据

最新推荐文章于 2020-09-08 08:40:00 发布

chenguangyou

最新推荐文章于 2020-09-08 08:40:00 发布

阅读量159

点赞数

分类专栏： angularjs 文章标签： $sce angularjs angular trustAs trustASHtml

本文链接：https://blog.csdn.net/chenguangyou/article/details/82999020

版权

angularjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

服务器端：

service层：

@Service
public class SearchServiceImpl implements SearchService {
    @Autowired
    private SolrTemplate solrTemplate;

    /**
     *
     * @param param
     * @return
     */
    @Override
    public Map<String, Object> search(Map<String,Object> param) {
        Map<String,Object> data = new HashMap<>();
        Query query = new SimpleQuery("*:*");
        String keywords = (String) param.get("keywords");
        if (keywords != null && StringUtils.isNotBlank(keywords)){
            HighlightOptions options = new HighlightOptions();
            options.addField("title");
            options.setSimplePrefix("<font color='red'>");
            options.setSimplePostfix("</font>");
            query = new SimpleHighlightQuery().setHighlightOptions(options);
            Criteria criteria = new Criteria("keywords").is(keywords);
            query.addCriteria(criteria);
            HighlightPage<SolrItem> solrItems = solrTemplate.queryForHighlightPage((HighlightQuery) query, SolrItem.class);
            List<HighlightEntry<SolrItem>> highlighted = solrItems.getHighlighted();
            for (HighlightEntry<SolrItem> entry : highlighted) {
                SolrItem entity = entry.getEntity();
                if ( entry.getHighlights().size()> 0 && entry.getHighlights().get(0).getSnipplets().size()> 0){
                    String title = entry.getHighlights().get(0).getSnipplets().get(0);
                    entity.setTitle(title);
                }
            }
            List<SolrItem> content = solrItems.getContent();
            data.put("rows",content);
            return data;
        }
        ScoredPage<SolrItem> solrItems = solrTemplate.queryForPage(query, SolrItem.class);
        List<SolrItem> content = solrItems.getContent();
        data.put("data",content);
        return data;
    }
}

controller层：

@RestController
@RequestMapping("/search")
public class SearchController {

    @Reference(timeout = 10000)
    private SearchService searchService;

    @PostMapping("/searchItem")
    public Map<String,Object> searchItem(@RequestBody Map<String,Object> param){
        try {
            return searchService.search(param);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

}

js 代码：

<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("mycontroller",function ($scope, $sce, $http) {
$scope.trustHtml = function(data) {
    return $sce.trustAs($sce.HTML, data);
};

$scope.searchEntity = {};
$scope.search=function () {
    $http.sendPost("/search/searchItem",$scope.searchEntity).then(
        function (response) {
            $scope.map = response.data;
        }
    );
});
</script>

html ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>HelloWord</title>
<script src="/angular.min.js"></script>
<script src="/jquery.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="search()">
<h2>ng-bind-html 不能用在textarea标签</h2>
<div ng-repeat="item in rows">
   <div>
      <div  ng-bind-html="trustHtml(item.title)">
       </div>
   </div>
</div>
</body>
</html>

chenguangyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
$sce 服务，设置服务器传来的数据为可渲染的html数据

服务器端：service层：@Servicepublic class SearchServiceImpl implements SearchService { @Autowired private SolrTemplate solrTemplate; /** * * @param param * @return */ ...
复制链接

扫一扫