8

私はこのすべての角張った新しいものです...

カスタム ディレクティブがあります。それを myDar と呼びましょう。このディレクティブ内で、リンク関数を定義します。私のhtmlでは、次のように、このディレクティブの複数のネストされたタグを使用したいと考えています:

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

「outer」のリンク機能を先に実行してほしい。どうすればいいですか？

それが一般的な質問です。それが役立つ場合、私が実際にやろうとしているのは、jquery ui レイアウト ( web サイトへのリンク) をラップするディレクティブを作成することです。したがって、「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)、最初に外部を呼び出す必要があります。そうしないと、レイアウトが正しくレンダリングされません。

4

2 に答える 2

8

これには、ディレクティブのコントローラーを利用します。これは、ネストされたコントローラーを登録するメソッドを定義するクラス$(...).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()) する必要があります。

于 2014-01-15T16:46:53.117 に答える