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

Commit f5ebcba

Browse files
docs($compile): add better multi-slot transclusion information
1 parent 0812af4 commit f5ebcba

File tree

1 file changed

+32
-22
lines changed

1 file changed

+32
-22
lines changed

src/ng/compile.js

+32-22
Original file line numberDiff line numberDiff line change
@@ -226,19 +226,21 @@
226226
* * `$element` - Current element
227227
* * `$attrs` - Current attributes object for the element
228228
* * `$transclude` - A transclude linking function pre-bound to the correct transclusion scope:
229-
* `function([scope], cloneLinkingFn, futureParentElement)`.
230-
* * `scope`: optional argument to override the scope.
231-
* * `cloneLinkingFn`: optional argument to create clones of the original transcluded content.
232-
* * `futureParentElement`:
229+
* `function([scope], cloneLinkingFn, futureParentElement, slotName)`:
230+
* * `scope`: (optional) override the scope.
231+
* * `cloneLinkingFn`: (optional) argument to create clones of the original transcluded content.
232+
* * `futureParentElement` (optional):
233233
* * defines the parent to which the `cloneLinkingFn` will add the cloned elements.
234234
* * default: `$element.parent()` resp. `$element` for `transclude:'element'` resp. `transclude:true`.
235235
* * only needed for transcludes that are allowed to contain non html elements (e.g. SVG elements)
236236
* and when the `cloneLinkinFn` is passed,
237237
* as those elements need to created and cloned in a special way when they are defined outside their
238238
* usual containers (e.g. like `<svg>`).
239239
* * See also the `directive.templateNamespace` property.
240-
* The `$transclude` function has a property called `$slots`, which is a hash of slot names to slot transclusion
241-
* functions. If a slot was declared but not filled its value on the `$slots` object will be `null`.
240+
* * `slotName`: (optional) the name of the slot to transclude. If falsy (e.g. `null`, `undefined` or `''`)
241+
* then the default translusion is provided.
242+
* The `$transclude` function also has a method on it, `$transclude.isSlotFilled(slotName)`, which returns
243+
* `true` if the specified slot contains content (i.e. one or more DOM nodes).
242244
*
243245
* #### `require`
244246
* Require another directive and inject its controller as the fourth argument to the linking function. The
@@ -338,22 +340,6 @@
338340
* The contents are compiled and provided to the directive as a **transclusion function**. See the
339341
* {@link $compile#transclusion Transclusion} section below.
340342
*
341-
* There are three kinds of transclusion depending upon whether you want to transclude just the contents of the
342-
* directive's element, the entire element or parts of the element:
343-
*
344-
* * `true` - transclude the content (i.e. the child nodes) of the directive's element.
345-
* * `'element'` - transclude the whole of the directive's element including any directives on this
346-
* element that defined at a lower priority than this directive. When used, the `template`
347-
* property is ignored.
348-
* * **`{...}` (an object hash):** - map elements of the content onto transclusion "slots" in the template.
349-
* See {@link ngTransclude} for more information.
350-
*
351-
* Mult-slot transclusion is declared by providing an object for the `transclude` property.
352-
* This object is a map where the keys are the canonical name of HTML elements to match in the transcluded HTML,
353-
* and the values are the names of the slots. If the name is prefixed with a `?` then that slot is optional.
354-
*
355-
* The slots are made available as `$transclude.$slots` on the transclude function that is passed to the
356-
* linking functions as the fifth parameter, and can be injected into the directive controller.
357343
*
358344
* #### `compile`
359345
*
@@ -483,6 +469,30 @@
483469
* Testing Transclusion Directives}.
484470
* </div>
485471
*
472+
* There are three kinds of transclusion depending upon whether you want to transclude just the contents of the
473+
* directive's element, the entire element or multiple parts of the element contents:
474+
*
475+
* * `true` - transclude the content (i.e. the child nodes) of the directive's element.
476+
* * `'element'` - transclude the whole of the directive's element including any directives on this
477+
* element that defined at a lower priority than this directive. When used, the `template`
478+
* property is ignored.
479+
* * **`{...}` (an object hash):** - map elements of the content onto transclusion "slots" in the template.
480+
*
481+
* **Mult-slot transclusion** is declared by providing an object for the `transclude` property.
482+
*
483+
* This object is a map where the keys are the name of the slot to fill and the value is the element selector
484+
* used to match the HTML to the slot. Only element names are supported for matching. If the element selector
485+
* is prefixed with a `?` then that slot is optional.
486+
*
487+
* For example, the transclude object `{ slotA: '?my-custom-element' }` maps `<my-custom-element>` elements to
488+
* the `slotA` slot, which can be accessed via the `$transclude` function or via the {@link ngTransclude} directive.
489+
*
490+
* Slots that are not marked as optional (`?`) will trigger a compile time error if there are no matching elements
491+
* in the transclude content. If you wish to know if an optional slot was filled with content, then you can call
492+
* `$transclude.isSlotFilled(slotName)` on the transclude function passed to the directive's link function and
493+
* injectable into the directive's controller.
494+
*
495+
*
486496
* #### Transclusion Functions
487497
*
488498
* When a directive requests transclusion, the compiler extracts its contents and provides a **transclusion

0 commit comments

Comments
 (0)