Question

我有一个名为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);
        }
    }
});

Answer 1

对我来说，拥有两个不同的指令更有意义（例如，对于嵌套菜单，有一个<menu>指令和一个<submenu>指令。）

但是如果你坚持使用相同的指令，有几种方法可以区分根菜单和嵌套菜单（例如，你可以遍历元素的父母，直到找到<menu>父母或文件 - 元素）。

我更喜欢的另一种方法（主要是因为它的＆＃34;直截了当＆＃34;）是为根菜单分配一个额外的属性：

<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];
        ...

另请参阅此 short demo 。

仅当不在div中时才需要运行指令

1 个答案: