|
1050 | 1050 | * @restrict A
|
1051 | 1051 | * @element ANY
|
1052 | 1052 | *
|
| 1053 | + * @usage |
| 1054 | + * |
| 1055 | + * ```html |
| 1056 | + * <ANY ng-prop-propname="expression"> |
| 1057 | + * </ANY> |
| 1058 | + * ``` |
| 1059 | + * |
| 1060 | + * or with uppercase letters in property (e.g. "propName"): |
| 1061 | + * |
| 1062 | + * |
| 1063 | + * ```html |
| 1064 | + * <ANY ng-prop-prop_name="expression"> |
| 1065 | + * </ANY> |
| 1066 | + * ``` |
| 1067 | + * |
| 1068 | + * |
1053 | 1069 | * @description
|
1054 | 1070 | * The `ngProp` directive binds an expression to a DOM element property.
|
1055 | 1071 | * `ngProp` allows writing to arbitrary properties by including
|
|
1067 | 1083 | *
|
1068 | 1084 | * Since HTML attributes are case-insensitive, camelCase properties like `innerHTML` must be escaped.
|
1069 | 1085 | * AngularJS uses the underscore (_) in front of a character to indicate that it is uppercase, so
|
1070 |
| - * `innerHTML` must be written as `ng-prop-inner_h_t_m_l="expression"`. |
| 1086 | + * `innerHTML` must be written as `ng-prop-inner_h_t_m_l="expression"` (Note that this is just an |
| 1087 | + * example, and for binding HTML {@link ngBindHtml} should be used. |
1071 | 1088 | *
|
1072 | 1089 | * ## Security
|
1073 | 1090 | *
|
|
1076 | 1093 | * malicious code.
|
1077 | 1094 | * For this reason, `ngProp` applies Strict Contextual Escaping with the {@link ng.$sce $sce service}.
|
1078 | 1095 | * This means vulnerable properties require their content to be "trusted", based on the
|
1079 |
| - * context of the property. For example, the `iframe[src]` property is in the `RESOURCE_URL` context and |
1080 |
| - * `innerHTML` is in the `HTML` context. |
1081 |
| - * If you trust the source of the content, you can use {@link ng.$sce#trustAs $sce.trustAs()}, (and |
1082 |
| - * the shortcut methods {@link ng.$sce#trustAsHtml $sce.trustAsHtml()} et al.) to create an object |
1083 |
| - * that wraps the value and is marked as safe. However, you should only do this if you are sure the |
1084 |
| - * value is safe. |
| 1096 | + * context of the property. For example, the `innerHTML` is in the `HTML` context, and the |
| 1097 | + * `iframe.src` property is in the `RESOURCE_URL` context, which requires that values written to |
| 1098 | + * this property are trusted as a `RESOURCE_URL`. |
| 1099 | + * |
| 1100 | + * This can be set explicitly by calling $sce.trustAs(type, value) on the value that is |
| 1101 | + * trusted before passing it to the `ng-prop-*` directive. There are exist shorthand methods for |
| 1102 | + * each context type in the form of {@link ng.$sce#trustAsResourceUrl $sce.trustAsResourceUrl()} et al. |
| 1103 | + * |
| 1104 | + * In some cases you can also rely upon automatic sanitization of untrusted values - see below. |
1085 | 1105 | *
|
1086 | 1106 | * Based on the context, other options may exist to mark a value as trusted / configure the behavior
|
1087 |
| - * of {@link ng.$sce}. For example, to the `RESOURCE_URL` context to specific origins, use the |
1088 |
| - * {@link $sceDelegateProvider#resourceUrlWhitelist $sceDelegateProvider#resourceUrlWhitelist} and |
1089 |
| - * {@link $sceDelegateProvider#resourceUrlBlacklist $sceDelegateProvider#resourceUrlBlacklist}. |
| 1107 | + * of {@link ng.$sce}. For example, to restrict the `RESOURCE_URL` context to specific origins, use |
| 1108 | + * the {@link $sceDelegateProvider#resourceUrlWhitelist resourceUrlWhitelist()} |
| 1109 | + * and {@link $sceDelegateProvider#resourceUrlBlacklist resourceUrlBlacklist()}. |
1090 | 1110 | *
|
1091 | 1111 | * {@link ng.$sce#what-trusted-context-types-are-supported- Find out more about the different context types}.
|
1092 | 1112 | *
|
1093 |
| - * ### Sanitization |
| 1113 | + * ### HTML Sanitization |
1094 | 1114 | *
|
1095 |
| - * By default, `$sce` will throw an error if it detects untrusted content, and will not bind the |
| 1115 | + * By default, `$sce` will throw an error if it detects untrusted HTML content, and will not bind the |
1096 | 1116 | * content.
|
1097 | 1117 | * However, if you include the {@link ngSanitize ngSanitize module}, it will try to sanitize the
|
1098 |
| - * potentially dangerous content, e.g. strip non-whitelisted tags and attributes when binding to |
| 1118 | + * potentially dangerous HTML, e.g. strip non-whitelisted tags and attributes when binding to |
1099 | 1119 | * `innerHTML`.
|
1100 | 1120 | *
|
1101 | 1121 | * @example
|
|
1161 | 1181 | *
|
1162 | 1182 | *
|
1163 | 1183 | * @example
|
1164 |
| - * ### Binding unsafe content with ngSanitize |
| 1184 | + * ### Binding to innerHTML with ngSanitize |
1165 | 1185 | *
|
1166 | 1186 | * <example name="ngProp" module="exampleNgProp" deps="angular-sanitize.js">
|
1167 | 1187 | * <file name="app.js">
|
|
1222 | 1242 | * @restrict A
|
1223 | 1243 | * @element ANY
|
1224 | 1244 | *
|
| 1245 | + * @usage |
| 1246 | + * |
| 1247 | + * ```html |
| 1248 | + * <ANY ng-on-eventname="expression"> |
| 1249 | + * </ANY> |
| 1250 | + * ``` |
| 1251 | + * |
| 1252 | + * or with uppercase letters in property (e.g. "eventName"): |
| 1253 | + * |
| 1254 | + * |
| 1255 | + * ```html |
| 1256 | + * <ANY ng-on-event_name="expression"> |
| 1257 | + * </ANY> |
| 1258 | + * ``` |
| 1259 | + * |
1225 | 1260 | * @description
|
1226 |
| - * The `ngOn` directive adds an event listener to a DOM element, and evaluates an expression |
1227 |
| - * when the event is fired. |
| 1261 | + * The `ngOn` directive adds an event listener to a DOM element via |
| 1262 | + * {@link angular.element angular.element().on()}, and evaluates an expression when the event is |
| 1263 | + * fired. |
1228 | 1264 | * `ngOn` allows adding listeners for arbitrary events by including
|
1229 |
| - * the event name in the attribute, e.g. `ng-on-drop="onDrop()"` executes the 'onDrop' expression |
| 1265 | + * the event name in the attribute, e.g. `ng-on-drop="onDrop()"` executes the 'onDrop()' expression |
1230 | 1266 | * when the `drop` event is fired.
|
1231 | 1267 | *
|
1232 | 1268 | * AngularJS provides specific directives for many events, such as {@link ngClick}, so in most
|
|
1237 | 1273 | * [custom events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events)
|
1238 | 1274 | * that are fired like normal DOM events.
|
1239 | 1275 | *
|
| 1276 | + * ## Binding to camelCase properties |
| 1277 | + * |
| 1278 | + * Since HTML attributes are case-insensitive, camelCase properties like `myEvent` must be escaped. |
| 1279 | + * AngularJS uses the underscore (_) in front of a character to indicate that it is uppercase, so |
| 1280 | + * `myEvent` must be written as `ng-on-my_event="expression"`. |
| 1281 | + * |
1240 | 1282 | * @example
|
1241 | 1283 | * ### Bind to built-in DOM events
|
1242 | 1284 | *
|
|
0 commit comments