Директива, которая запускает событие при нажатии за пределами элемента
Я знаю, что есть много вопросов, которые задают подобные вещи. Но никто не может решить мою проблему.
Я пытаюсь создать директиву, которая будет выполнять выражение при щелчке мышью за пределами текущего элемента.
Зачем мне эта функция? Я'При создании приложения в этом приложении есть 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.
Так есть ли лучшее решение для этого? Спасибо