Ng-bind-html не работает для тегов ввода

Я пытаюсь сохранить HTML внутри переменной области видимости, а затем использовать его в виде шаблона. Когда я читал, как это сделать в angular, я наткнулся на ng-bind-html. В этом я заметил, что когда я связываю теги html с <a>, <strong> и т.д., Он работает. Но я не могу добавить теги <input> к нему.

Значение, это работает:

$scope.myHtml = '<strong>This is <a hreaf="#">Something</a></strong>';

Шаблон:

<p ng-bind-html="myHtml"> </p>

Но это не работает:

$scope.myHtml = '<input type="text" />';

Шаблон:

<p ng-bind-html="myHtml"> </p>

Вышеприведенное является просто упрощенным образцом только для демонстрационной цели. Мой вопрос:

1) Не работают ли теги с директивой ng-bind-html?

2) Если нет, как я могу связать html тег ввода, чтобы я мог вставить его в представление?

Ответ 1

вы получаете $sce: небезопасная ошибка...

это означает, что вы должны использовать ng-bind-html-unsafe, но более новая версия angularjs больше не включает эту директиву, поэтому вы можете использовать $sce.trustAsHtml(), как это...

$scope.trustedInputHtml = $sce.trustAsHtml('<input type="text" />');

но таким образом вы не можете привязать переменные области к вашему html, поэтому лучший способ - написать директиву, которая может быть заменена на ng-bind-html-unsafe...

здесь работает PLUNKER как для $sce, так и для директивных примеров...

Ответ 2

Я бы сохранил материал, который вы вставляете в свой собственный шаблон, и используйте ng-include (http://docs.angularjs.org/api/ng/directive/ngInclude).

Наличие шаблона angular (template.html) с содержимым:

<strong>This is <a href="#">Something</a></strong>

Вы можете включить его с помощью

<p ng-include="template.html"></p>

Это приводит к тому, что

<p ng-include="template.html"><span class="ng-scope"><strong>This is <a href="#">Something</a></strong></span></p>

Ответ 3

Angular выборочно санирует определенные HTML-теги с помощью ng-bind-html

поэтому, если вам нужны все теги, вы должны использовать ng-bind-html-unsafe вместо

но следите за атаками XSS!

BTW

Намного лучше следовать рекомендациям @Ed Hinchliffe