Angular: Compile Priority Test

http://angularjs.org/

by Josh Kurz

HTML

<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<div ng-app="Demo">
 
    <h1>
        Exploring Directive Controllers, Compiling, Linking, And Priority In AngularJS
    </h1>
 
    <p bn-one bn-two bn-three bn-four>
 
        <span bn-child>Checkout my controllers!</span>
 
    </p>
 
</div>

CSS

.light{
    width: 100%;
    height: 85%;
}

.stopLight{
    margin: 20px auto;
    border: solid 5px grey;
    width: 33%;
    height: 25%;
}

JavaScript

var demo = angular.module('Demo',[])
// -------------------------------------------------- //
// -------------------------------------------------- //


// I execute at priority 500. This time, however, we're going
// to compile and transclude the element - but only on this
// directive - the other three remain exactly the same.
demo.directive(
    "bnOne",
    function() {


        // I compile this element and return the linking
        // function to be used during the linking phase.
        function compile( element, attributes, transclude ) {

            // Store the transclude method on the link (just
            // to make it easier to read this code - this way
            // the link defintion doesn't have to be nested
            // inside the compile function).
            console.log('hey', link);
            link.transclude = transclude;

            // Return our linking function.
            return(  { post: link } );

        }


        // I am the controller for this directive.
        function Controller( $scope, $element, $attrs ) {

            this.id = "bnOne";

        }


        // I bind the $scope to the DOM behaviors.
        function link( $scope, element, attributes, controllers, transcludeFn ) {

            // At this point, the "element" is the HTML
            // comment node that holds the base for the
            // transcluded element template. Now, we need to
            // include / inject the cloned template element
            // AFTER the comment node.
            //
            // NOTE: We're NOT using $scope.$new() in this
            // case since there's no need for this directive
            // to create a new scope for this clone.
            transcludeFn(
                $scope,
                function( clone ) {

                   element.after( clone );

               }
            );
            
            console.log($scope)

            console.log( "bnOne ( priority: 500 + compile )" );
           ...