Search within TutorialsPark

AngularJS Directives : Directive Templates


Learn how to use AngularJS to create and use Directive Templates


AngularJS Directives : Directive Templates

AngularJS allows you to use HTML Templates, in order to replace the contents of the element upon which directives are used.Thus creating a simple and easy to maintain directive.

In the demo, the scope property info is used to specify the source of the data i.e directive attribute orderedList.The definition property template is used to specify an HTML block that will be used a the content of the element upon which directive is applied.

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: Function as Templates

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: Using External Template

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 Using Directive as Class Attributes

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.