JSFiddle - React, Tailwind, and code Playground

by S_YOU

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<div ng-app="app">
    <p>outer element's scope: {{$id}}</p>
    <custom-directive isolate-value="Hello!">
        <p>inner element's scope: {{$id}}</p>
        <p>isolate value: {{isolateValue || 'undefined'}}</p>
    </custom-directive>
</div>

JavaScript

function Directive($compile) {
    return {
        restrict: 'EA',
        terminal: true,
        scope: { isolateValue: "@" },
        link: function(scope, element, attr) {
            console.log("isolate scope: " + scope.$id);
            console.log("isolate value: " + scope.isolateValue);
            $compile(element.contents())(scope);
        }
    };
}

angular
    .module('app',[])
    .directive('customDirective', Directive);