Nesting AngularJS Custom Directives

Vishal Gilbile
9y
7.1k
0
0

Article

NestingDirectivesDemo3.rar|NestingDirectivesDemo2.rar|NestingDirectivesDemo1.rar

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

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:

AngularJS Custom Directives

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

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/angular.min.js"></script>
@RenderSection("scripts", required: false)
</head>
<body class="container">
@RenderBody()
</body>
</html>

userPost.html (our Parent AngularJS Directive)

<div>
<div ng-repeat="user in userDetails">
<div ng-repeat="post in user.Posts">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h5><strong>{{user.Name}}</strong></h5>
</div>
<div class="panel-body">
<img ng-src="{{post.Content}}" alt="Image" class="img-responsive" />
</div>
<div class="panel-footer">
<user-likes likes-count="{{post.Likes.length}}"></user-likes>
</div>
</div>
</div>
</div>
</div>

userLikes.html (our Nested/Child AngularJS Directive)

<div>
<button class="btn btn-primary" type="button">
Likes <span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<span class="badge">{{likesCount}}</span>
</div>

Index.cshtml

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts
{
<script src="~/Scripts/app/Home.js"></script>
}
<style>
.img {
}
</style>
<div ng-controller="homeController" class="table-responsive">
<user-posts user-details="users">
</user-posts>
</div>

Home.js

var myApp = angular.module("myApp", []);
//Creating Service for retrieving Data
myApp.service("ConnectAppDataService", function () {
this.GetConnectAppUserDetails = function () {
var ConnectAppUserDetails = [
{
UserId: "1",
Name: "Vishal Gilbile",
Posts: [
{
PostId: "1",
Content: "../../Content/images/images11.jpg",
Likes: [
{
LikeId: "1",
UserId: "2",
},
{
LikeId: "2",
UserId: "4"
}
]
},
{
Post: "2",
Content: "../../Content/images/images2.jpg",
Likes: [
{
LikeId: "3",
UserId: "2",
},
{
LikeId: "4",
UserId: "4"
},
{
LikeId: "5",
UserId: "3"
}
]
}
]
},
{
UserId: "2",
Name: "Lincy Pullan",
Posts: [
{
PostId: "3",
Content: "../../Content/images/images4.jpg",
Likes: [
{
LikeId: "6",
UserId: "3"
},
{
LikeId: "7",
UserId: "1"
}
]
},
{
PostId: "4",
Content: "../../Content/images/images5.jpg",
Likes: [
{
LikeId: "8",
UserId: "1"
}
]
},
{
PostId: "11",
Content: "../../Content/images/images6.jpg",
Likes: [
{
LikeId: "9",
UserId: "4"
}
]
}
]
},
{
UserId: "3",
Name: "Rahul Bandekar",
Posts: [
{
PostId: "5",
Content: "../../Content/images/images12.jpg",
Likes: [
{
LikeId: "10",
UserId: "1"
}
]
},
{
PostId: "6",
Content: "../../Content/images/images8.jpg",
Likes: []
},
{
PostId: "7",
Content: "../../Content/images/images7.jpg",
Likes: [
{
LikeId: "10",
UserId: "1"
}
]
}
]
},
{
UserId: "4",
Name: "Muthu Konar",
Posts: [
{
PostId: "8",
Content: "../../Content/images/images3.jpg",
Likes: [
{
LikeId: "11",
UserId: "1"
},
{
LikeId: "12",
UserId: "4"
}
]
},
{
PostId: "9",
Content: "../../Content/images/images10.gif",
Likes: [
{
LikeId: "13",
UserId: "2"
},
{
LikeId: "14",
UserId: "3"
}
]
},
{
PostId: "10",
Content: "../../Content/images/images1.jpg",
Likes: []
}
]
}
];
return ConnectAppUserDetails;
};
});
//Home Controller
myApp.controller("homeController", ["$scope", "ConnectAppDataService", function ($scope, ConnectAppDataService) {
$scope.users = ConnectAppDataService.GetConnectAppUserDetails();
//console.log("homeController", $scope);
}]);
//UserPost Directive
myApp.directive("userPosts", function () {
return {
restrict: "E",
templateUrl: "../../Directives/userPosts.html",
scope: {
userDetails: "="
}
}
});
//UserLikes Directive
myApp.directive("userLikes", function () {
return {
restrict: "E",
templateUrl: "../../Directives/userLikes.html",
scope: {
likesCount: '@'
}
}
});

Now let’s run the application and you’ll see the following output.

output

Up Next

Ebook Download

View all

AngularJS Recipes

Read by 8.5k people

Download Now!

Learn

View all