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