JSFiddle - React, Tailwind, and code Playground

by r0m4n

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    Isolated parent scope: {{isolatedStatus}}
    <isolated></isolated>
    <nonisolated></nonisolated>
  </div>
</div>

JavaScript

var app = angular.module('myApp', []);
app.config(['$compileProvider', function($compileProvider) {
  //Be careful, don't write production code that relies on these functions as this breaks them
  //$compileProvider.debugInfoEnabled(false);
}]).controller('myCtrl', ['$scope', '$element', function($scope, $element) {
  $scope.isolatedStatus = $element.isolateScope() ? true : false;
}]).directive("isolated", function() {
  return {
    restrict: "E",
    replace: true,
    scope: {
      someInfo: '=info'
    },
    template: "<div>Inside isolated directive: {{test}}</div>",
    link: function(scope, element) {
      scope.test = element.isolateScope() ? true : false;
    }
  };
}).directive("nonisolated", function() {
  return {
    restrict: "E",
    replace: true,
    scope: false,
    template: "<div>Inside nonisolated directive: {{test}}</div>",
    link: function(scope, element) {
      scope.test = element.isolateScope() ? true : false;
    }
  };
});