Пробую сделать в Ангуляре меню, которое будет скрываться при щелчке в любом месте экрана кроме самого меню. От модального окна оно отличается тем, что там нет подложки на весь экран по которой можно щелкнуть, а от дропдауна — тем, что не закрывается при нажатии на самом себе. Работающий пример (меню с премиями):
http://tamtakoe.ru/directors/index3.html
Пробовал несколько способов. Наиболее вменяемый: директива
.directive('oiBlurClose', ['$document', function ($document) {
return {
link: function(scope, element, attrs) {
scope.$watch(attrs.oiBlurClose, function (value, oldval) {
if (value !== oldval && value) {
setTimeout(function () {
$document.bind('click', function (e) {
scope.$apply(function () {
scope[attrs.oiBlurClose] = false;
})
})
}, 0);
} else {
$document.unbind('click')
}
}, true)
element.bind('click', function (event) {
event.preventDefault();
event.stopPropagation();
});
}
};
}])
Самый большой недостаток тут это unbind('click'), который снимает все обработчики по клику, в т.ч. чужие. Неймспейсы Ангуляр не поддерживает. Второй вариант — сделать директиву с глобальным сервисом, где постоянно будет биндится $document и на каждое срабатывание будет по-очереди вызываться код из всех директив oiBlurClose. Как бы вы сделали?