Улучшить эту документацию Просмотреть исходный код ngProp

Обзор

Директива ngProp связывает выражение со свойством элемента DOM. ngProp позволяет записывать в произвольные свойства, включая имя свойства в атрибуте, например ng-prop-value="'my value'" связывает «my value» со свойством value.

Обычно в AngularJS нет необходимости записывать в свойства, так как встроенные директивы обрабатывают наиболее распространённые случаи использования (вместо вышеприведённого примера, вы бы использовали ngValue).

Однако, ngProp часто используют пользовательские свойства для хранения данных, и ngProp может быть использован для предоставления входных данных этим пользовательским элементам.

Связывание с camelCase свойствами

Поскольку атрибуты HTML нечувствительны к регистру, свойства camelCase, такие как innerHTML, должны быть экранированы. AngularJS использует символ подчеркивания (_) перед символом для обозначения заглавной буквы, поэтому innerHTML должно быть записано как ng-prop-inner_h_t_m_l="expression" (Обратите внимание, что это всего лишь пример, и для связывания HTML ngBindHtml следует использовать).

Безопасность

Связывание выражений с произвольными свойствами представляет собой риск безопасности, так как свойства, такие как innerHTML, могут вставлять потенциально опасный HTML в приложение, например теги script, которые выполняют вредоносный код. По этой причине ngProp применяет жёсткое контекстное экранирование с помощью $sce service. Это означает, что уязвимые свойства требуют, чтобы их содержимое было «доверенным», в зависимости от контекста свойства. Например, innerHTML находится в контексте HTML, а свойство iframe.src находится в контексте RESOURCE_URL, что требует, чтобы значения, записанные в это свойство, были доверенными как RESOURCE_URL.

Это можно задать явно, вызвав $sce.trustAs(type, value) для значения, которому доверяют, прежде чем передавать его в директиву ng-prop-*. Существуют сокращённые методы для каждого типа контекста в форме $sce.trustAsResourceUrl() и т. д.

В некоторых случаях вы также можете полагаться на автоматическую очистку недоверенных значений — см. ниже.

В зависимости от контекста могут быть и другие варианты для маркировки значения как доверенного / настройки поведения $sce. Например, чтобы ограничить контекст RESOURCE_URL определёнными источниками, используйте resourceUrlWhitelist() и resourceUrlBlacklist().

Узнайте больше о различных типах контекстов.

Очистка HTML

По умолчанию $sce выдаст ошибку, если обнаружит недоверенное содержимое HTML, и не свяжет содержимое. Однако, если вы включите модуль ngSanitize, он попытается очистить потенциально опасный HTML, например, удалить нераспознанные теги и атрибуты при связывании с innerHTML.

<ANY ng-prop-propname="expression">
</ANY>

<ANY ng-prop-prop_name="expression">
</ANY>