AngularJS(十五) 解析html的过滤器

定义过滤器、解析高亮查询为html

//页面查询结果
<font color = 'red' >华为</font> HuaWei p20 Pro 64G 蓝色 联通4G手机 

1.配置过滤器

    // 定义模块:
    var app = angular.module("pinyougou",[]);

    //$sce 服务写成过滤器
    app.filter('trustHtml',['$sce',function($sce){
            return function(data){
                return $sce.trustAsHtml(data);
            }
    }]);

2.页面调用过滤器

//ng-bind-html="item.title | trustHtml" 调用过滤器

<div class="attr" ng-bind-html="item.title | trustHtml"></div>

查询效果：华为 HuaWei p20 Pro 64G 蓝色 联通4G手机

原代码，不加过滤器

//这样高亮不能被解析,会显示为
<div class="attr" >{{item.title }}</div>

这样高亮不能被解析,会显示为

<font color = 'red' >华为</font> HuaWei p20 Pro 64G 蓝色 联通4G手机