angularjs - 指令链接函数执行顺序

Question

我对这个 Angular 有点陌生......

我有一个自定义指令，我们称之为 myDar。
在这个指令中，我定义了一个链接函数。
在我的 html 中，我想使用该指令的多个嵌套标签，如下所示:

<myDar id="outer"><myDar id="inner"></myDar></myDar>

我希望先执行“外部”的链接功能。我该怎么做呢？

这是普遍的问题。
如果有帮助，那么我真正想做的是创建包装 jquery ui 布局( link to the website )的指令。所以我有一个“ui-layout”指令和“center”、“west”等指令。
在“ui-layout”指令中，我调用了 $(tElm).layout(options) .
创建嵌套布局时遇到问题:

<ui-layout class="layout-container">
    <ui-layout-center>
        <ui-layout>
            <ui-layout-center>inner center</ui-layout-center>
            <ui-layout-west>inner west</ui-layout-west>
        </ui-layout>        
    </ui-layout-center>
    <ui-layout-west>west</ui-layout-west>
</ui-layout>

Angular 首先执行内部“ui-layout”指令的链接函数，但要让 jquery ui 布局插件工作，它需要调用 $(tElm).layout(options)首先是外部，否则布局无法正确呈现。

Answer 1

为此，您将利用指令的 Controller 。它将是一个类，它定义了注册嵌套 Controller 的方法和另一个用于在此元素上执行所需命令(此处为 $(...).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"));与要运行的实际代码。查看相关 fiddle : http://jsfiddle.net/8xSjZ/

如果外部指令与当前指令不同，则获取父 Controller 就像需要 "?^y" 一样简单。 .在这种情况下，它为我们提供了当前 Controller ，因此我们必须自己循环 ( e.parent() )。