Angular - 是其他元素的子元素

Question

我试图找到一种纯粹的角度方式来确定单击的元素是否是另一个元素的子元素。在jQuery中，我会做（），但不知道在Angular中执行它的方式，除了遍历所有的孩子并进行比较。

的jQuery：

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

Answer 1

你可以去周围的其他方式。

不要问B是否是A的孩子，你可以问A是否是B的祖先：

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

Answer 2

我要在这里把这个，因为我试图解决同样的问题，并认为它可能对别人有用，即使它不是对has()的严格取代。

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

如果你正在处理一个长方形的目标，你可以对证的element的边界矩形的单击事件的X和Y（这是一个angular.element）

$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 
      } 
     } 
    }