Nesting AngularJS Custom Directives

If you haven’t gone through my previous articles on AngularJS custom directives please have a look at it from the following links.

• Creating Custom Directives in AngularJS - Part 1
• Defining Scope Behavior Inside AngularJS Custom Directives
• Creating Custom Directives In AngularJS - Part 2

This article would be an extension of my previous articles. Here we’ll try to understand how do we nest one AngularJS custom directive inside another. Well there are ample situations where you’ll need to nest one custom directive inside another.

Let’s consider an example of a social media website where a user post some content and his friends likes or comments on that post. Posting a content is one part (i.e. it becomes our 1st directive) and likes or commenting on that post is another part (i.e. it becomes our nested directive). To demonstrate this look at the following snapshot:



For demonstrating this article we’ll try to implement the above scenario. I’m using VS2013 Mvc4 application, also I have added the necessary AngularJS script and boostrap css files in the application. Let’s get into the code now.

_Layout.cshtml