Проверьте, является ли event.target дочерним элементом Угловой директивы (элемента)

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).

• Открыть выпадающий
  • выпадающего А открывает правильно
• Открыть ниспадающего B
  • ниспадающего B открывает правильно
  • выпадающего А получает событие документа и говорит, что прессованный элемент является child директивы выпадающего списка (что является правильным)
  • выпадающий список A не закрывается s (Но я хочу, чтобы закрыть!)

Как проверить, если event.target является потомком angular.element?
Как сейчас, я проверяю, является ли event.target дочерним элементом директивы выпадающего списка (это действует только при использовании директивы 1 выпадающего списка)!

Answer 1

В соответствии с запросом Zia Ul Rehman Mughal Я обновлю вопрос с ответом, который я использовал в своей собственной выпадающей директиве.

---

часть, где я сделал ошибку, чтобы добавить щелчок слушателя при открытии раскрывающийся, и удалить его снова, когда она закрыта. Это неправильный код!

Вы должны добавить слушатель, когда создается объект, и удалить их снова, когда объект разрушается (с угловым $destroy события.

Чтобы проверить, щелкнули целью является потомком элемента вы можете используйте атрибут length$element.find(event.target)

function closeDropDown() { 
    $scope.opened = false; 
} 

function handleClickEvent(event) { 
    /* When the clicked element is not a child of the element and 
     the dropdown is openend, close the dropdown. */ 
    if ($element.find(event.target).length === 0 && $scope.opened) { 
     closeDropDown(); 
     /* Trigger new digest cycle */ 
     $scope.$apply(); 
    } 
}; 

function setListeners() { 
    /* Bind click event to the document, close the dropDown if clicked 
     elsewhere on the page. */ 
    var clickHandler = handleClickEvent; 
    $document.bind('click', clickHandler); 

    /* Remove the used event handlers when destroying the object */ 
    $scope.$on('$destroy', function() { 
     $document.unbind('click', clickHandler); 
    }); 
}