0

我正在使用带有角度预输入的过滤器将额外的项目附加到预输入建议列表中，如下所示：

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 编码的字符串，但 angular 会自动对其进行清理。我尝试按照建议使用 $sce ，但它似乎不起作用。这是 plunkr：plunkr

提前致谢。

4

1 回答 1

1

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

只需将您的 tpl.html 更改为：

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

并加载 angular sanitize 以防止 angular 自动抛出安全错误。

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

将 ngSanitize 注入您的应用程序。

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

它有效。这是plunker地址。

但是，如果您仍想使用 typeahead 内部高亮过滤器，您可以将 ui-bootstrap 更改为此（已在演示中更改）：

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

希望这可以工作。好好享受。:)

于 2014-11-03T06:47:22.463 回答