AngularJS Simple Partial Include Directive

AngularJS Simple Partial Include Directive. Use this code to help you reuse your partial templates inside other templates. You can have optional switching of views also if you wanted. Sorry no demo at the moment.

Separate out your HTML template which you want to reuse and include in other templates.


Now create a new directive in your module. Using a directive here gives us flexibility of creating it as a component. For example, the functionality in the scope can be reused wherever we include our directive – so we don’t have duplicated controller code. Nice.


Naming: Your directive named camel case will be available in your templates in lower case hyphen seperated.
Scope: Add scope:true if you don’t want this directives scope to be directly linked to other directives (use true if it doesn’t rely on other directives scopes).
Transclude: Add transclude:true if you want the HTML content in your directives HTML tag to go inside your partial template (where you will include ng-transclude and it will appear).

Then you can include it in your other templates like this:



Sam is a passionate web developer from England. In his spare time he enjoys coding, playing chess, reading and investing.

Leave a Reply

Your email address will not be published. Required fields are marked *