Элементы атрибутов ng-bind-html

Я пытаюсь интерполировать строку, содержащую некоторую разметку в шаблоне.

В контроллере:
$scope.message = "Hello moto <a ui-sref='home.test'>click</a>";

Шаблон:

<div ng-bind-html="message.text"></div>

который отображается как:

<div ng-bind-html="message.text" <div="" class="ng-binding">Hello moto <a>click</a></div>

Попытка использовать следующий фильтр также не помогает; текст пропущен для любого из комментариев:

angular.module('test-filters', ['ngSanitize'])
    .filter('safe', function($sce) {
            return function(val) {
                return $sce.trustAsHtml(val);
                //return $sce.trustAsUrl(val);
                //return $sce.trustAsResourceUrl(val);
            };
    });

Как я могу интерполировать мою строку, не избегая ее, и не снимая атрибуты?

Изменить: Plunker http://plnkr.co/edit/H4O16KgS0mWtpGRvW1Es?p=preview (обновлено версией sylwester, которая ссылается на ngSanitize

Ответ 1

Давайте посмотрим здесь http://jsbin.com/faxopipe/1/edit, который теперь сортируется. Это не сработало, потому что в теге "ui-sref" была другая директива, поэтому вам нужно использовать службу $sce.

в вашем js, пожалуйста, добавьте метод:

 $scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);

и в поле зрения:

<p ng-bind-html="to_trusted(message)"></p>

Ответ 2

В сценарии, где вы используете путь ui.router, вам нужно использовать $compile в комбинации с $sce для динамического html, чтобы ui- sref работают правильно. Если вы этого не сделаете, вы увидите ссылку, которая на самом деле не работает.

e.g <span> Hello moto <a ui-sref='home.test'> Link </a> </span>

//You must need to add boundary conditions, this is just for demonstration
$scope.to_trusted = function(someHTML) {
    var compiledVal = $compile(someHTML)($scope);
    var compiledHTML = compiledVal[0].outerHTML;
    return $sce.trustAsHtml(compiledHTML);
}

И вы используете вот так:

<p ng-bind-html="to_trusted(message)"></p>

Обратите внимание, что ваше сообщение должно быть допустимым HTML, начиная с "<", поэтому, если вы передаете компиляцию без HTML в $, вы получите ошибку jqlite. Я использовал <span> для обработки вашего дела.

Ответ 3

Вы пропустили ссылку на angular -sanitize.js, и вы также добавили ее к angular.app

var app = angular.module('plunker', ['ngSanitize']);

Самый простой вариант для привязки html - ng-bind-html:

<li>link ng-html-bind <div ng-bind-html="message"></div></li>

см. Plunkr