1

2 つの属性ディレクティブ (両方で制限が「A」に設定されています) がdir1ありdir2、それらは 2 つの異なるモジュールで定義されています。1 つのアプリ (これらのモジュールの両方を含む) には、これら 2 つのディレクティブのいずれかを追加できる要素があります。現在dir1、これがこの要素のデフォルトになるように設定していますが、dir2このディレクティブを「オーバーライド」する方法が必要です。

これを行いたい要素は、別のディレクティブのテンプレートの一部であるparentDirため、最初に考えたのは、 の関数に何らかの機能を追加することcompileでしparentDirた。のテンプレートparentDirが含まれている<div class="myElement" dir1="{{data}}"></div>と、コンパイル関数は次のようになります。

function(tElement, tAttrs) {
    if ("true" == tAttrs.useDir2)
    {
        var myElement = tElement.find("div.myElement");
        myElement.removeAttr("dir1");
        myElement.attr("dir2", "{{data}}");
    }

    return function (scope, element, attrs) {
    // link stuff
    }
}

whereはディレクティブuseDir2の属性になります。parentDirこれは問題なく動作しますが、 の値useDir2は補間された値であるため、 で必要な値を確認することはできませんtAttrs.useDir2。

2 つのディレクティブに優先順位を設定することを考えましたが、それぞれのディレクティブが互いに正しく関連していることを確認するために、他のディレクティブの優先順位を知る必要があります。誰かが 1 つのモジュールに入って別のモジュールの優先順位を変更し、この機能を壊してしまうのは望ましくありません。2 つのディレクティブは異なるモジュールにあるため、お互いを完全に無視したいと考えています。

私の問題を十分に明確に説明できたことを願っています。これを行う方法がわからないだけで、これを行う簡単な方法が欠けている可能性があると思います。ありがとう。

4

1 に答える 1

1

あなたが提案したようなことをする必要があると思います。実行時に (つまり、コントローラーによって) 定義する必要がある場合は、リンク関数で$observe属性を変更し、値が変更されたときに要素の内容を変更して再コンパイルします。このようなもの：

app.directive('parentDir', function($compile) {
  return {
    link: function(scope, element, attr) {
        attr.$observe('parentDir', function(value) {
            var div = angular.element('<div ' + value + '></div>');
            element.find('div').remove();
            element.append(div);
            $compile(div)(scope);
        });
    },
    template: '<input type="checkbox" ng-model="val"/> Use directive 2: ' + 
            '<div></div>'
  };
});

フィドルを作りました。

当然、parentDir を単純化しました。DOM の元の状態をキャッシュする必要があるかもしれないので、安全に再コンパイルできます。

于 2013-03-27T22:14:06.687 に答える