Угловой фильтр типа typehead: используйте html-теги

Question

Я использую фильтр с угловым typeahead, чтобы добавить дополнительный элемент в список предложений typeahead следующим образом:

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 как предложено, но это, похоже, не работает. Вот планкр: плункр

заранее спасибо.

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>

И загрузить угловую дезинфекцию, чтобы предотвратить безопасную ошибку, автоматически брошенную угловой.

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

введите ngSanitize в ваше приложение.

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

И это работает. Вот адрес плунжера.

Однако, если вы все еще хотите использовать фильтр внутренних подсветок typeahead, вы можете изменить свой ui-bootstrap на это (уже измените его в демо):

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

Надеюсь, это может сработать. Наслаждайся этим.:)