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

我有一个名为

menu

的指令，只有当它们不是menu元素的子元素时，我才需要执行它们的代码

HTML

---

对我来说，有两个不同的指令更有意义（例如，有一个

指令和一个

指令用于嵌套菜单）

但是如果您坚持使用同一指令，有几种方法可以区分根菜单和嵌套菜单（例如，您可以遍历元素的父菜单，直到找到父菜单或文档元素）

我更喜欢的另一种方法（主要是因为它的“直截了当”）是为根菜单指定一个额外的属性：

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

测试1
测试2
子测验1
子测验2
...
链接：功能（范围、el、属性）{
如果（！attrs.type）返回；
//这是根菜单
log（'我正在执行！'）；
var el=el[0]；
...

---

---

另请看，这个

看起来像是将元素保留为“菜单”，所以您只想跳过事件侦听器？您可以检查el的父标记吗？您的菜单应该是什么样子的，您的子菜单应该在其中一个菜单项中，不是吗？菜单可以到处都是，并且可以嵌套

querySelector

也会在元素的子菜单中查找，因此我不知道如何区分根菜单和具有其他子菜单的子菜单。很抱歉，我想得太晚了……：/但是我不想实现任何附加属性（以区别于HTML5标准）您的意思是什么“区别于HTML5标准”？我的目标是使其尽可能类似于HTML5标准。这意味着没有额外的属性，没有DOM差异。现在，我明白你的意思了。甚至HTML5标准也定义了一个类型属性。那么，类型属性呢？

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);
        }
    }
});

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