JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
<script type="text/ng-template" id="field.html">
    <label>{{::$label}}</label>
    <seamless-transclude></seamless-transclude>
</script>
<script type="text/ng-template" id="input-field.html">
    <div class="field" style="color: red">
        <seamless-transclude></seamless-transclude>
    </div>
</script>
<script type="text/ng-template" id="text-field.html">
    <div class="input-field">
        <input type="text" ng-model="$model" />
    </div>
</script>

<div class="text-field" label="Label" ng-model="text"></div>
<div>{{text}}</div>

JavaScript

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

app.directive('seamlessTransclude', function ($compile) {
    return {
        restrict: 'E',
        link: function ($scope, $element, $attrs, controller, $transclude) {
            $transclude($scope, function (clone) {
                $element.replaceWith(clone);
            });
        }
    };
});

app.directive('field', function () {
    return {
        restrict: 'C',
        transclude: true,
        templateUrl: 'field.html'
    };
});

app.directive('inputField', function () {
    return {
        restrict: 'C',
        transclude: true,
        templateUrl: 'input-field.html',
    };
});

app.directive('textField', function () {
    return {
        restrict: 'C',
        templateUrl: 'text-field.html',
        require: 'ngModel',
        scope: {
            $model: '=ngModel',
            $label: '@label'
        },
        compile: function(elem) {
            console.log('Template', elem.clone()[0]);
        }
    };
});