1

呼び出されたディレクティブがmenuあり、メニュー要素の子でない場合にのみコードを実行する必要があります。

HTML

<menu>
    <menuitem>Test 1</menuitem>
    <menuitem>Test 2</menuitem>
    <menu> <!-- The directive should not run inside of another menu -->
        <menuitem>SubTest 1</menuitem>
        <menuitem>SubTest 2</menuitem>
    </menu>
</menu>

指令

app.directive('menu', function() {
    document.addEventListener('contextmenu', function(){event.preventDefault()}, false);
    return {
        restrict: 'E',
        priority: 800,
        link: function(scope, el, attrs) {
            var el = el[0];
            el.addEventListener("contextmenu", function(){
                event.preventDefault();
            }, false);
            el.parentNode.addEventListener('contextmenu', function(){
                menu.style.display = "block";
                menu.style.top = event.layerY+"px";
                menu.style.left = event.layerX+"px";
            }, false);
        }
    }
});
4

1 に答える 1

1

私には、2 つの異なるディレクティブを使用する方が理にかなっています (たとえば、1 つの<menu>ディレクティブと<submenu>、ネストされたメニュー用の 1 つのディレクティブを使用するなど)。

しかし、どうしても同じディレクティブを使用したい場合は、ルート メニューとネストされたメニューを区別する方法がいくつかあります (たとえば、<menu>親またはドキュメント要素が見つかるまで、要素の親をたどることができます)。

私が気に入っている別のアプローチ (主にその「単純さ」のため) は、ルート メニューに追加の属性を割り当てることです。

<menu type="context">
    <menuitem>Test 1</menuitem>
    <menuitem>Test 2</menuitem>
    <menu> <!-- The directive should not run inside of another menu -->
        <menuitem>SubTest 1</menuitem>
        <menuitem>SubTest 2</menuitem>
    </menu>
</menu>

    ...
    link: function(scope, el, attrs) {
        if (!attrs.type) return;

        // This is a root menu
        console.log('I am executing !');

        var el = el[0];
        ...

この短いデモも参照してください。

于 2014-06-05T19:20:10.067 に答える