JSFiddle - React, Tailwind, and code Playground

by miketheanimal

HTML

<div ng-app="miketa">
    <div ng-controller='main'>
        main's name:{{_name}}
        <outer><inner></inner></outer>
    </div>
</div>
'outer' parent's name: <span id='opn'></span>
<br/>
'inner' parent's name: <span id='ipn'></span>

JavaScript

var module = angular.module('miketa', []);
function main ($scope) {
    $scope._name = 'main' ;
} ;
module.directive('outer', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {},
        template: '<div><div ng-transclude></div></div>',
        controller: [ '$scope', function($scope) {
            $scope._name = 'outer' ;
            document.getElementById('opn').innerHTML = $scope.$parent._name ;
        }]}});
module.directive('inner', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        template: '<div></div>',
        controller: [ '$scope', function($scope) {
            $scope._name = 'inner' ;
            document.getElementById('ipn').innerHTML = $scope.$parent._name ;
        }]}});