Угловой - это элементный ребенок другого

Question

Я пытаюсь найти чистый Угловой способ определения, является ли элемент с щелчком дочерним по отношению к другому. В jQuery я бы сделал has(), но не уверен, какой способ сделать это в Angular, кроме того, чтобы бежать через всех детей и делать сравнение.

JQuery:

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

Answer 1

Вы могли бы пойти другим путем вокруг.

Вместо того чтобы спросить ли B является потомком 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 (который является 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

Досадно, если ваш элемент содержит другие элементы, которые не влияют на его ширина/высота, которая не будет работать. Но вы можете использовать это (слегка взломанное) решение

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