JSFiddle - React, Tailwind, and code Playground

by Jeado

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-app='myApp'>
    <div class="well">The 'inner' directive has a compile function that uses elem.replaceWith and replaces the element with a checkmark icon:
        <div class="box" inner></div>
    </div>

    <div class="well">The same directive, used inside a transclusion, doesn't replace the element. <small>(Should be seeing a checkmark icon instead of the red box)</small>
        <div outer>
            <div class="box" inner></div>
        </div>
    </div>
    
    <div class="well">An alternative way to think about this is to have an additional root element in the transclusion:
        <div outer>
            <div>
                <div class="box" inner></div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    margin: 20px 0;
}

.box {
    border: 2px dashed red;
    width: 16px; 
    height: 16px;
}

JavaScript

// replaceWith

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

myApp.directive('outer', function() {
    return {
        template: '<div ng-transclude></div>',
        transclude: true
    };
});

myApp.directive('inner', function() {
    return {
        compile: function(tElem, tAttrs) {
            tElem.replaceWith('<i class="icon-ok"></i>');
        }
    }
});

myApp.directive('workaround', function() {
    return {
        compile: function(tElem, tAttrs) {
            tElem.append('<i class="icon-ok"></i>');
        }
    }
});