Question

我制作了一个自定义（ul li）下拉指令。

单击此下拉列表时，列表将被打开。
再次点击列表后，下拉列表将关闭。
单击列表中的选项时，该选项将保存在模型中，下拉列表将关闭。
在下拉列表外单击时，下拉列表将关闭。

大部分内容都是通过以下代码完成的（关闭和打开部分）。

scope.closeDropDown = function () {
    scope.isOpened = false;
    $document.unbind('click');
};

//The part for opening and closing is pressed
scope.openDropDown = function () {
    if (scope.isOpened) {
        //The dropdown is already opened, close it
        scope.closeDropDown();
    } else {
        //Open the dropdown, and add an event handler to the document
        scope.isOpened = true;

        $document.bind('click', function (evt) {
            var target = $(evt.target);
            // Check if the document clicked element is a child of the directive
            // ATTENTION HERE
            if (!target.parents('dropdown').length) {
                //Target is not a child element, close the dropdown
                scope.closeDropDown();
                scope.$apply();
            }
        });
    }
};

仔细阅读此处的注意事项在这里，我在整个页面上设置了一个事件监听器。使用它会给我带来以下问题：

示例：当有多个下拉列表时（例如A和B）。

打开下拉列表A.
- 下拉列表A正确打开
打开下拉列表B.
- 下拉列表B正确打开
- 下拉列表获取文档事件，并说按下的元素是下拉指令的子项（这是正确的）
- 下拉列表A未关闭（但我希望它关闭！）

如何检查event.target是否为angular.element的子项？
现在我只是checkig，如果event.target是下拉指令的子项（这仅在使用1下拉指令时有效）！

Answer 1

根据Zia Ul Rehman Mughal的要求，我将使用我自己的下拉指令中的答案更新问题。

我犯错的部分是在打开下拉列表时添加点击监听器，并在关闭时再次将其删除。 这是错误的！

您必须在创建对象时添加侦听器，并在对象被销毁时再次删除它们（使用角度$destroy事件。

要检查点击的目标是否是元素的子元素，您可以使用length的{{1}}属性

$element.find(event.target)

检查event.target是否是Angular指令的子元素（元素）

1 个答案: