Search within TutorialsPark

AngularJS Directives : Transclusion and Compile Functions


Learn how to use AngularJS Andvanced Directives features of Transclusion and Compile Function


AngularJS Directives : Transclusion

The meaning of transclusion is to insert one section of the document within another using some reference. Transclusion feature is useful with directives when you create a directive which wraps another content.

In the demo, a custom element named tutorialspark is created to wrap content within it. The content has a definition property transclude, set as true so that the content within the panel within will get inserted within the template.

Example: AngularJS Directives Directives Templates

Give it a TRY! » Note: The directive ng-transclude is used at point where the wrapped content are to be inserted.

AngularJS Complex Directives: Using Compile Functions

AngularJS Compile functions are used to increase the performance of the code, it makes use fo the transclusion property to generate content repeatedly, just like ng-repeat.

In the demo, the directive named iterator makes use of transclusion to repeat a set of elements for each item within the array.

The compile function is used to manipulate only the DOM, hence it is not provided with scope but instead with a link function returned by a compile function.

Example: Angular Advanced Directives Using Compile Function

Give it a TRY! » Note: The incrementStock behaviour is used add new stock to the table and increments the value of the price on all stocks.


AngularJS Advanced Directives: Using Controllers within Directives

AngularJS Directives can be used to create controllers, these controllers can be used by other directives, also multiple directives can be combined to create more complex directives.

In the demo,, the first directive stockListing is used on table element and makes use of transclusion to wrap tr elements and inline binding value named totalShares

The second directive myStocks is used within the table with the directive ng-repeat inorder to create table rows for each item.

Example: Angular Custom Directives Scope for each Directive Instance

Give it a TRY! » Note: The table has multiple instances of directive myStocks, each having a bi-directional binding with property shares.


AngularJS Advanced Directive : Adding Features for Directive Controller

We now add additional support features to the last example, now the number of share can be calculated in realtime using bi-directional binding feature, and the values can be reset using the reset Button.

The name stockListing is assigned a prefix value ^ inorder to look for other directives on the parent element upon which this directive was applied.

Table : Basic method and properties provided by NgModel Controller

Name Description
None To assume both directives are applied to the same element
^ To search for the other directive on the parent element of the element upon which the directive was applied
? Used to not report an error in case the directive cannot be located, hence must be used with caution

Example: AngularJS Advanced Directives Adding Features for Directive Controllers

Give it a TRY! » Note: The controller stockListing is independent of the controller myStocks, the controller stockListing provides data to function calculateShares