角预输入过滤器：使用HTML标签

Question

我使用的是预输入角的过滤器，以额外的项目追加到预输入建议列表，像这样：

app.filter('finalAppend', function($sce){ 
    return function(array, value){ 
    array.push({ 
    name: $sce.trustAsHtml('Look for <b>' + value + '</b> in other shops'), 
    type: 'good' 
    }); 
    return array; 
    } 
}); 

我想返回HTML编码字符串，但角度自动消毒它。我尝试使用$ sce作为建议，但它似乎并没有工作。这里的普朗克：plunkr

在此先感谢。

Answer 1

它似乎在ui-bootstrap 0.7.0中，打印头突出显示过滤器和您自己的finalAppend过滤器之间存在冲突。

只要改变你的tpl.html这样：

<div ng-if="match.model.type!=null"> 
    <span ng-bind-html="match.label"></span> 
</div> 

和负载角的sanitize防止安全错误的角度自动被抛出。

<script src="http://code.angularjs.org/1.3.1/angular-sanitize.js"></script> 

将ngSanitize注入到您的应用中。

var app = angular.module('myApp', ['ui.bootstrap', 'ngSanitize']); 

它的工作原理。 Here is the plunker address.

但是，如果你仍然想使用预输入内部的高亮显示过滤器，你可以改变你的用户界面，引导到这个（已经改变它在演示）：

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script> 

希望这可以工作。好好享受。 ：）