角預輸入過濾器：使用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> 

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