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

Обзор

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

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

Однако, настраиваемые элементы часто используют пользовательские свойства для хранения данных, и 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 до определённых источников используйте trustedResourceUrlList() и bannedResourceUrlList().

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

Очистка HTML

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

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

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