angularjs - уроки - ng-bind-html удаляет атрибуты элементов



angularjs на русском (2)

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

например, <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 в $ compile, вы получите ошибку jqlite . Я использовал <span> для обработки вашего дела.

https://src-bin.com

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

В контроллере:
$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


Answer #1

Вы пропустили ссылку на 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





angularjs