Директива, которая запускает событие при нажатии за пределами элемента

Я знаю, что есть много вопросов, которые задают подобные вещи. Но никто не может решить мою проблему.

Я пытаюсь создать директиву, которая будет выполнять выражение при щелчке мышью за пределами текущего элемента.

Зачем мне эта функция? Я'При создании приложения в этом приложении есть 3 выпадающих меню, 5 выпадающих списков (как выбрано). Все это угловые директивы. Позволять'Предполагается, что все эти директивы разные. Итак, у нас есть 8 директив. И все они нуждаются в одной и той же функции: когда вы щелкаете по элементу, нужно скрыть выпадающий список.

У меня есть 2 решения для этого, но оба получили проблему:

Решение А:

app.directive('clickAnywhereButHere', function($document){
  return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
      elem.bind('click', function(e) {
        // this part keeps it from firing the click on the document.
        e.stopPropagation();
      });
      $document.bind('click', function() {
        // magic here.
        scope.$apply(attr.clickAnywhereButHere);
      })
    }
  }
})

Вот пример для решения A:кликните сюда

Когда вы нажимаете первый выпадающий список, затем работаете, затем нажимаете второй вход, первый должен скрываться, но не должен.

Решение Б:

app.directive('clickAnywhereButHere', ['$document', function ($document) {
    directiveDefinitionObject = {
        link: {
            pre: function (scope, element, attrs, controller) { },
            post: function (scope, element, attrs, controller) {
                onClick = function (event) {
                    var isChild = element.has(event.target).length > 0;
                    var isSelf = element[0] == event.target;
                    var isInside = isChild || isSelf;
                    if (!isInside) {
                        scope.$apply(attrs.clickAnywhereButHere)
                    }
                }
                $document.click(onClick)
            }
        }
    }
    return directiveDefinitionObject
}]);

Вот пример для решения B:кликните сюда

Решение Работает, если есть только одна директива на странице, но не в моем приложении. Потому что это'Это предотвращает появление пузырей, поэтому сначала, когда я нажимаю на dropdown1, показываю dropdown1, затем нажимаю на dropdown2, событие click будет предотвращено, поэтому dropdown1 все еще отображается там, даже если я нажимаю за пределами dropdown1.

Решение B работает в моем приложении, которое ям использую сейчас. Но проблема в том,s вызывает проблемы с производительностью. Слишком много событий нажатия обрабатывается при каждом нажатии в любом месте приложения. В моем текущем случае есть 8 событий привязки клика с документом, поэтому каждый щелчок выполняет 8 функций. Которые вызывают мое приложение очень медленно, особенно в IE8.

Так есть ли лучшее решение для этого? Спасибо

Ответы на вопрос(8)

Ваш ответ на вопрос