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

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

但是如果你坚持使用相同的指令，有几种方法可以区分根菜单和嵌套菜单（例如，你可以遍历元素的父元素，直到找到<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 回答