JSFiddle - React, Tailwind, and code Playground

by bchapman26

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <h1>{{title}}</h1><br/>
  <mydirective desc="desc"></mydirective>
</div>

JavaScript

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

app.directive('mydirective', function ($compile) {
    var directive = {
        restrict: 'E',
        scope: {
            desc: '='
            },
        replace: false,
        template: '<p>Directive: {{desc}}</p>',
        link: function(scope, element, attrs) {
             scope.compiledDesc = 'Bar';
            var content = $compile(angular.element('<p>Compiled element: {{compiledDesc}}</p>'))(scope);
           element.append(content);
            element.append('<p>I want the next line to produce "Compiled element: Bar"</p>');
            element.append('<code>' + content.html() + '</code>');
          
        }
    };
    return directive;
});
function MyCtrl($scope) {
    $scope.title = 'Example Directive';
    $scope.desc = 'Foo';
}