JSFiddle - React, Tailwind, and code Playground

by newjavaone mahesh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="MyCtrl as vm">
  <grand-parent>
		<parent></parent>
  </grand-parent>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function() {});

myApp.directive("grandParent", function() {
	return {
		template: [
			'<div style="border: 1px solid">',
				'<p>transcluded view is below:</p>',
				'<ng-transclude></ng-transclude>',
			'</div>'
		].join(""),
		transclude: true,
		controller: function() {
			this.getMe = "grandParentCtrl.controller.getMe";
		},
    controllerAs: 'grandParent'
	};
});

myApp.directive('parent', function($compile) {
  return {
		require: "^^grandParent",
    link: function($scope, $element, $attrs, grandParentCtrl) {
      $element.append($compile('<son></son>')($scope, undefined, {
				transcludeControllers: {
					grandParent: {
						instance: grandParentCtrl
					}
				}
			}));
    }
  }
});

myApp.directive('son', function($compile) {
  return {
    require: '^grandParent',
		template: [
			'<div class="btn btn-danger">',
				'abc: <i>{{abc}}</i>',
			'</div>'
		].join(""),
    link: function(scope, element, attrs, ctrl) {
			scope.abc = ctrl.getMe;
		}
  };
});