$sce 服務，設定伺服器傳來的資料為可渲染的html資料

伺服器端：

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>

$sce 服務，設定伺服器傳來的資料為可渲染的html資料

相關推薦