Search within TutorialsPark

AngularJS Directives : Directive Scopes


Learn how to use AngularJS to Handle various types of Directive Scopes.


AngularJS Directives : Handling Directive Scopes

For an AngularJS Directive to be reusable, the relation between the

Example: AngularJS Directives Directives Templates

Give it a TRY! » Note:The HTML block comprises of element ol and li, with the directive ng-repeat

AngularJS Complex Directives: Multiple Controllers

AngularJS property template can also be specified with a function as a value, to produce a template. The function has two arguments, first is the directive used and second is the attribute

The script element holds the template content, the DOM API is used to locate the script element using ID attribute.

Example: Angular Complex Directives Function as a Template

Give it a TRY! » Note:The value of the property restrict is set as A i.e attribute, since directive is used as an Attribute.


AngularJS Complex Directives: Scope for each Directive Instance

In the last example the template was seperated from the content using a script element, but the template is internal.But you can seperate the template content out using an External Template.

The Template content is a seperate external file, and attached to the document using the definition object property templateUrl, the file name is demoTemplate.html

Example: Angular Custom Directives Scope for each Directive Instance

Give it a TRY! » Note: The example is same as the last example, but the template file is external.


AngularJS Complex Directive : External Template with a Function

The AngularJS property definition templateUrl can be assigned with a function as value, these function can assign a multiple templates dynamically.

Example: AngularJS Complex Directives External Template using a Function

Give it a TRY! » Note: There are two div elements, both using seperate templates to display data from same source.


AngularJS Complex Directive : Replacing Elements

The AngularJS Directive Templates are inserted within the element upon which the directives are used, however this behaviour can be altered using the definition property replace.

With the value of the property replace set as true, does not only replace the elements within the template but also adds all the attributes of the element to the template content.

Example: AngularJS Complex Directives Replacing Elements

Give it a TRY! » Note: You can also use other directives, and all the properties will be transfered to the template.


AngularJS Complex Directive : Isolated Scope Evaluation Expression

The AngularJS Directive Templates are inserted within the element upon which the directives are used, however this behaviour can be altered using the definition property replace.

With the value of the property replace set as true, does not only replace the elements within the template but also adds all the attributes of the element to the template content.

Example: AngularJS Complex Directives Replacing Elements

Give it a TRY! » Note: You can also use other directives, and all the properties will be transfered to the template.