Directive order

by mslocum

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.js"></script>
<div auth view other>
    <div inner></div>
</div>


<br/><br/>
<section>
log:<br/>
<textarea id="log"></textarea>
</section>
<section>
    Expected log:
<pre>
auth
auth transclude
view
other
view transclude
inner
</pre>
</section>

CSS

textarea {
    height: 20em;
    font-family: monospace;
    font-size: 13px;
}

section {
    float: left;
    margin: 0 10px 0 0;    
}

pre {
    margin: 0;
}

JavaScript

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

function log(strData) {
    var log = angular.element('#log');
    log.val(log.val() + strData + '\n');
}
    
app.directive('auth', function($compile){
    return {
        transclude: 'element',
        terminal: true,
        priority: 1000,
        $$tlb: true,
        link: function(scope, el, attrs, ctrl, $transclude) {
            log('auth');
            setTimeout(function() {
                log('auth transclude');
                $transclude(scope, function(clone) {
                    el.after(clone);
                });
            }, 1000);
        }
    }
});

app.directive('view', function($compile){
    return {
        transclude: true,
        terminal: true,
        $$tlb: true, // this isn't really needed, but seems more complete
        link: function(scope, el, attrs, ctrl, $transclude) {
            log('view');
            setTimeout(function() {
                log('view transclude');
                $transclude(scope, function(clone) {
                    el.append(clone);
                });
            }, 1000);
        }
    }
});

app.directive('inner', function($compile){
    return {
        template: 'inner',
        link: function(scope, el, attrs) {
            log('inner');
        }
    }
});

app.directive('other', function($compile){
    return {
        link: function(scope, el, attrs) {
            log('other');
        }
    }
});