множественных правой кнопка мыши ContextMenu angularjs

Question

я пытаюсь реализовать выпадающее меню на правой кнопке мыши, используя эту директиву contextMenu в angularjs. Эта директива отлично работает в firefox, но не закрывает старое меню при открытии другого при использовании «google chrome». Любая идея, как я могу внести в нее изменения. Вот plunkr

(function(angular) { 
    var ngContextMenu = angular.module('directive.contextMenu', []); 

    ngContextMenu.directive('cellHighlight', function() { 
    return { 
     restrict: 'C', 
     link: function postLink(scope, iElement, iAttrs) { 
    iElement.find('td') 
     .mouseover(function() { 
     $(this).parent('tr').css('opacity', '0.7'); 
     }).mouseout(function() { 
     $(this).parent('tr').css('opacity', '1.0'); 
     }); 
    } 
}; 
}); 

ngContextMenu.directive('context', [ 

function() { 
    return { 
    restrict: 'A', 
    scope: '@&', 
    compile: function compile(tElement, tAttrs, transclude) { 
     return { 
     post: function postLink(scope, iElement, iAttrs, controller) { 
      var ul = $('#' + iAttrs.context), 
      last = null; 

      ul.css({ 
      'display': 'none' 
      }); 
      $(iElement).bind('contextmenu', function(event) { 
      event.preventDefault(); 
      ul.css({ 
       position: "fixed", 
       display: "block", 
       left: event.clientX + 'px', 
       top: event.clientY + 'px' 
      }); 
      last = event.timeStamp; 
      }); 
      //$(iElement).click(function(event) { 
      // ul.css({ 
      // position: "fixed", 
      // display: "block", 
      // left: event.clientX + 'px', 
      // top: event.clientY + 'px' 
      // }); 
      // last = event.timeStamp; 
      //}); 

      $(document).click(function(event) { 
      var target = $(event.target); 
      if (!target.is(".popover") && !target.parents().is(".popover")) { 
       if (last === event.timeStamp) 
       return; 
       ul.css({ 
       'display': 'none' 
       }); 
      } 
      }); 
     } 
     }; 
    } 
    }; 
    } 
    ]); 
    })(window.angular); 

Answer 1

Измените событие .click на событие .mouseup, и оно будет работать с хром.

$(document).mouseup(function(event) { 
      var target = $(event.target); 
      if (!target.is(".popover") && !target.parents().is(".popover")) { 
       if (last === event.timeStamp) 
       return; 
       ul.css({ 
       'display': 'none' 
       }); 
      } 
      }); 

Я столкнулся с той же проблемой, и это сработало для меня. :)

Answer 2

Глядя на исходный код (директивы), я думаю, что эта директива контекстное меню немного слишком просто. Это просто не намного больше, чем запуск show/hide на элементе, на который ссылается атрибут context. Этого, возможно, было достаточно для варианта использования того, кто его написал, но он, по-видимому, слишком легкий для общего решения.

Что происходит в директивном коде: если вы случайно вызвали контекстное меню в той же строке (или более общую ссылку в том же контекстном меню), она работает правильно, потому что она просто отображает текущее контекстное меню в другом месте , Если вы сначала вызываете context1, а затем (щелкнув по второй строке) запускаете другое контекстное меню context2, там просто нет кода, который бы вызывал скрытие контекстного меню context1.

Вы также можете реализовать это самостоятельно, но затем отслеживать все уже открытые контекстные меню и закрывать их перед открытием другого.

Btw: это контекстное меню не работает для меня в Firefox (38, Mac OS X). Он открывает контекстное меню и сразу же закрывает его снова. Вероятно, это связано с тем, что инициируются как contextmenu (в строке таблицы), так и click (по документу).