Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 127300f

Browse files
committed
fixup! docs: more ngProp docs
1 parent a2d6c2e commit 127300f

File tree

1 file changed

+59
-17
lines changed

1 file changed

+59
-17
lines changed

src/ng/compile.js

+59-17
Original file line numberDiff line numberDiff line change
@@ -1050,6 +1050,22 @@
10501050
* @restrict A
10511051
* @element ANY
10521052
*
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+
*
10531069
* @description
10541070
* The `ngProp` directive binds an expression to a DOM element property.
10551071
* `ngProp` allows writing to arbitrary properties by including
@@ -1067,7 +1083,8 @@
10671083
*
10681084
* Since HTML attributes are case-insensitive, camelCase properties like `innerHTML` must be escaped.
10691085
* 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.
10711088
*
10721089
* ## Security
10731090
*
@@ -1076,26 +1093,29 @@
10761093
* malicious code.
10771094
* For this reason, `ngProp` applies Strict Contextual Escaping with the {@link ng.$sce $sce service}.
10781095
* 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.
10851105
*
10861106
* 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()}.
10901110
*
10911111
* {@link ng.$sce#what-trusted-context-types-are-supported- Find out more about the different context types}.
10921112
*
1093-
* ### Sanitization
1113+
* ### HTML Sanitization
10941114
*
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
10961116
* content.
10971117
* 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
10991119
* `innerHTML`.
11001120
*
11011121
* @example
@@ -1161,7 +1181,7 @@
11611181
*
11621182
*
11631183
* @example
1164-
* ### Binding unsafe content with ngSanitize
1184+
* ### Binding to innerHTML with ngSanitize
11651185
*
11661186
* <example name="ngProp" module="exampleNgProp" deps="angular-sanitize.js">
11671187
* <file name="app.js">
@@ -1222,11 +1242,27 @@
12221242
* @restrict A
12231243
* @element ANY
12241244
*
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+
*
12251260
* @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.
12281264
* `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
12301266
* when the `drop` event is fired.
12311267
*
12321268
* AngularJS provides specific directives for many events, such as {@link ngClick}, so in most
@@ -1237,6 +1273,12 @@
12371273
* [custom events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events)
12381274
* that are fired like normal DOM events.
12391275
*
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+
*
12401282
* @example
12411283
* ### Bind to built-in DOM events
12421284
*

0 commit comments

Comments
 (0)