ред за изпълнение на функцията на директивната връзка

За това ще се възползвате от контролера на директивата. Това ще бъде клас, дефиниращ метод за регистриране на вложени контролери и друг за изпълнение на желаната команда (тук $(...).layout(...)) на този елемент и след това на всичките му деца. Това означава, че външната директива е отговорна за координирането на създаването на оформленията.

Пълният примерен код е:

app.directive("y", function() {
    function Controller($element) {
        this.$element = $element;
        this.children = [];
    }

    Controller.prototype.register = function(child) {
        this.children.push(child);
    };

    Controller.prototype.execute = function() {
        console.log("PAYLOAD: " + this.$element.attr("id"));
        for( var i=0; i < this.children.length; i++ ) {
            this.children[i].execute();
        }
    };

    return {
        require: "y",
        controller: ["$element", Controller],
        link: function(scope, element, attrs, ctrl) {
            var e = element.parent(), nested = false;
            while( e != null ) {
                if( e.controller("y") != null ) {
                    e.controller("y").register(ctrl);
                    nested = true;
                    break;
                }
                e = e.parent();
                if( typeof(e.tagName) === "undefined" ) break; //XXX Needed, at least for fiddle
            }
            if( !nested ) ctrl.execute();
        }
    };
});

Заменете реда console.log("PAYLOAD: " + this.$element.attr("id")); с действителния код за изпълнение. Вижте съответната цигулка: http://jsfiddle.net/8xSjZ/

Ако външната директива беше различна от текущата, получаването на родителския контролер би било толкова лесно, колкото изискването "?^y". В този случай ни дава текущия контролер, следователно трябва сами да зациклим (e.parent()).

В зависимост от точния случай на употреба функция compile може да е подходяща. compile функции се изпълняват преди link функции и - което е по-важно - в обратен ред. Това означава първо родител.

app.directive("ui-layout", function() {
  return {
    restrict: 'E',
    compile: function(element, attrs) {
               //do layout stuff here
               //return a link function or nothing

Друго решение може да бъде да изпълните съответния код на дъщерните си директиви с помощта на $timeout.

app.directive("ui-layout-center", function($timeout) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
            $timeout(function() {
              //do layout stuff later
             }, 0);