Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.10.2013, 12:55
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Скрытие меню при нажатии в любом другом месте экрана
Пробую сделать в Ангуляре меню, которое будет скрываться при щелчке в любом месте экрана кроме самого меню. От модального окна оно отличается тем, что там нет подложки на весь экран по которой можно щелкнуть, а от дропдауна — тем, что не закрывается при нажатии на самом себе. Работающий пример (меню с премиями): 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. Как бы вы сделали?
Ответить с цитированием
  #2 (permalink)  
Старый 11.10.2013, 13:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,222

Сообщение от Shitbox2
Самый большой недостаток тут это unbind('click'), который снимает все обработчики по клику, в т.ч. чужие.
А ты почитай доку про тот unbind...
http://jquery-docs.ru/Events/unbind/#typefn
А потом сделай без этого "недостатка"...
Ответить с цитированием
  #3 (permalink)  
Старый 11.10.2013, 14:30
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от ksa
А потом сделай без этого "недостатка"...
Сообщение от Shitbox2
Неймспейсы Ангуляр не поддерживает.

Сообщение от Shitbox2
value !== oldval
http://angular.ru/api/angular.equals

Сообщение от Shitbox2
setTimeout
http://angular.ru/api/ng.$timeout

Сообщение от Shitbox2
$document.unbind('click')
$document.unbind('click', handler);
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #4 (permalink)  
Старый 11.10.2013, 14:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,222

Сообщение от nerv_
$document.unbind('click', handler);
На это я и намекал автору...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 17:08
Снятие затемнения с экрана при получении ответа от php срипта с помощью setInterval roma86 jQuery 0 16.08.2009 12:39
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Меню выезжающее слева при подведении курсора к левой части экрана Артём Тарасов Общие вопросы Javascript 6 25.02.2009 14:18
изменение рисунка в меню при помощи Javasripta Maxim Общие вопросы Javascript 1 05.09.2008 14:59