JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-app="app">
  <div ng-controller="componentCtrl">
    <parent-directive>
      <child-directive>
        <child-directive></child-directive>
      </child-directive>
    </parent-directive>
  </div>
</div>

CSS

div.component {
  border: 1px solid red;
  padding: 1rem;
}

JavaScript

stvar app = angular.module('app', []);
app.directive('parentDirective', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    controller: 'componentCtrl',
    scope: {
      settings: '='
    },
    link: function(scope, iElement, attrs) {
      //...
      console.log('parent');
    },
    template: '<div class="component" ><button ng-click="deleteComponent()">Remove Parent</button><div ng-transclude></div></div>'
  };
})

app.directive('childDirective', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    controller: 'componentCtrl',
    scope: {
      settings: '='
    },
    link: function(scope, iElement, attrs) {
      //...
      console.log('child');
    },
    template: '<div class="component"><button ng-click="deleteComponent()">Remove Child</button><div ng-transclude></div></div>'
  };
})

app.controller('componentCtrl', ['$scope', '$element', function($scope, $element) {
  $scope.viewScopes = function(){
  	console.log($scope);
  };
  
  $scope.deleteComponent = function() {
    console.log('deleting...');
    $scope.$destroy();

    //logic for directive DOM removal
    $element.remove();
  };
}]);