Angular - 是其他元素的子元素答案

【问题标题】：Angular - is element child of otherAngular - 是其他元素的子元素
【发布时间】：2013-03-07 23:45:55
【问题描述】：

我正在尝试找到一种纯 Angular 方法来确定单击的元素是否是另一个元素的子元素。在 jQuery 中，我会使用 has() 但不确定在 Angular 中使用哪种方法，除了遍历所有子项并进行比较。

jQuery:

if($(someelement).has(another)) { };

【问题讨论】：

你的用例是什么？
我正在重新编写 Bootstrap clickover (fancy popover) 插件。我需要确定是否单击了正文，但检查它是否不是单击的弹出框本身。尝试在任意位置单击并关闭功能。在上面的代码中，'someelement' 是元素 popover div - 'another' 是从 body click 函数返回的 - github.com/lecar-red/bootstrapx-clickover/blob/master/js/… - 我没有检测到 body clicks 的问题，但是 has() 行让我很难过。跨度>
为什么不给$document 添加一个点击处理程序？这就是下拉切换的工作原理 - check out the code - 将它添加到弹出插件应该非常简单（如两三行代码）。
你支持ie
你可以使用 AngularJs 内置的 jqLite 提供的方法 docs.angularjs.org/api/angular.element "jqLite 是一个微小的、与 API 兼容的 jQuery 子集，它允许 Angular 操作 DOM"

标签： javascript jquery angularjs

【解决方案1】：

你可以反过来。

您可以询问A是否是B的祖先，而不是询问B是否是A的孩子：

function isAncestor(ancestor, element) {
    var parent = element.parentNode;
    while (parent && parent!=ancestor) {
        parent = parent.parentNode;
    }
    return parent==ancestor;
}

【讨论】：

【解决方案2】：

我将把它放在这里，因为我正在尝试解决同样的问题并认为它可能对其他人有用，即使它不是 has() 的严格替代品。

我的第一个解决方案是使用Element.getBoundingClientRect()。

如果您正在处理一个矩形目标，您可以根据element 的边界矩形（这是一个 angular.element）检查点击事件的 x 和 y

$document.bind('click', function(evt) {
    var x = evt.x,
        y = evt.y,
        rect = element[0].getBoundingClientRect();

    if(x > rect.left && x < rect.right && y > rect.top && y < rect.bottom) {
        //you've clicked somewhere in the element
    }
});

IE8+ 运行良好，但 5-7 有一个小错误

http://www.quirksmode.org/dom/w3c_cssom.html

如果您的元素包含不影响其宽度/高度的其他元素，则将无法正常工作。但是你可以使用这个（有点hacky）的解决方案

    link: function(scope, element, attrs) {

        var clicked = false;

        element.on('click', eClickHandler);
        $document.on('click', clickHandler);

        function eClickHandler(event) {
            clicked = true;
            $timeout(function() {
                clicked = false;
            });
        }

        function clickHandler(event) {
            if(!clicked) {
                // click occurred outside
            }
        }
    }

【讨论】：