JSFiddle - React, Tailwind, and code Playground

by etianqq

HTML

<body ng-app="myapp">
<div ng-controller="ExampleController">
    <input ng-model="title" aria-label="title"> <br/>
    <textarea ng-model="text" aria-label="text"></textarea> <br/>
    <pane title="{{title}}"><span>{{text}}</span></pane>
</div>
</body>

JavaScript

angular.module('myapp', [])
     .directive('pane', function () {
                return {
                    restrict: 'E',
                    transclude: true,
                    scope: {title: '@'},
                    template: '<div style="border: 1px solid black;">' +
                    '<div style="background-color: gray">{{title}}</div>' +
                    '<ng-transclude></ng-transclude>' +
                    '</div>'
                };
            })
     .controller('ExampleController', ['$scope', function ($scope) {
                $scope.title = 'Lorem Ipsum';
                $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
            }]);