Angular Datatables with Child Rows Using Directive

in This article, I will let you know Angular Datatables with Child Rows Using Directive. We have earlier posted an article Angular Datatable Pagination, Sorting and Searching Using Ajax . Sometimes we need to show details information about the row and we are creating a new page to show a little detailed information about the parent row. We can handle this problem using parent-child row element in datatables. I am using angular datatables, So I will create an angular directive to show details information of clicked parent row. We will create a basic custom directive and pass our detail information object to it. The angular directive is a very awesome trick to add dynamic control or information to an element. In this Post, We have provided source code as well as the demo to show angular datatables parent-child relationship using angular directive. There are the following files and Library Used jQuery and AngularJS Library: Base libabry to support other angular directives.Boostrap 3: Used to create an awesome HTML layout.angular datatable: Use to create datatable grid in an angular app using angular directive, You can download from here.directive.js: This file will contain angular directive javascript code._child.html: This file will contain html layout code and parse child object data. You can also check other tutorials of angular, Angular Loading spinner or Preloading image with finallyAngular Datatable Pagination, Sorting and Searching Using AjaxHow to convert Bootstrap HTML Theme into angularJS template Simple Example of Angular Datatables with Child rows Step 1: We will include all necessary AngularJs and library files. We will keep all the below files in the head section of index.html file. Step 2: We will create an angular app for this sample and define dependencies(app.js). TestApp angular.module('TestApp', ); angular.module('TestApp.controllers', ).controller('testController', function($scope,DTOptionsBuilder, DTColumnBuilder, $compile) { }); Step 3: We will create angular directive and define all necessary parameters with in directive.js. (function (window, angular, undefined) { 'use strict'; angular.module('TestApp') .directive('tmpl', testComp); function testComp($compile){ console.log('sss'); var directive {}; directive.restrict 'A'; directive.templateUrl 'app/view/_child.html'; directive.transclude true; directive.link function(scope, element, attrs){ } return directive; } })(window, window.angular); Step 4: We will create an angular directive HTML file and define all HTML elements within _child.html. Salary : {{user.salary}} Start Date : {{user.start_date}} Ext : {{user.extn}} Angular Datatbles Directive Using AngularJS and Datatables Demo & Download Source Code Live Demo Download Source Code