Блог

Главная - Вопросы по программированию - Предложения по кодированию контекстного меню с помощью AngularJS

Предложения по кодированию контекстного меню с помощью AngularJS

#angularjs

#angularjs

Вопрос:

Я хочу закодировать директиву contextmenu для моего проекта. Прежде всего, создал пример контекстного меню в виде директивы angular JS:

 var myApp = angular.module('myApp',[]);

myApp.directive("myContextMenu", function(){
  restrict: 'AE',
  replace: true,
  template: "",
  link: (scope, elem, attrs) ->
    elem.bind "contextmenu", ->
      scope.$apply ->
        console.log "Right click to an item."
    elem.bind "mouseleave", ->
    elem.bind 'mouseover', ->
      elem.css('cursor', 'pointer');
});

Вот мой пример HTML-файла:

 <div ng-app>
  <div my-context-menu>
    Right click to display a context-menu
  </div>
</div>

Когда я щелкаю правой кнопкой мыши по тексту, я хочу добавить некоторый div (например. Пример контекстного меню). Когда мышь покидает div, я хочу, чтобы пример контекстного меню был удален.

Каков правильный подход к этому. Должен ли я заполнить поле «шаблон» директивы? Должен ли я скрывать и показывать контекстное меню? Или я должен добавлять и удалять контекстное меню?

Любая помощь будет любезно оценена?

С уважением.

Ответ №1:

Взгляните на этот проект https://github.com/ianwalter/ng-context-menu

На мой взгляд, важно то, как вы определяете контекстное меню, и хорошим примером для размышления об этом является ng-repeat (таким образом, вам придется немного больше подумать о области видимости)

Я думаю, что определение встроенного меню было бы довольно чистым

то есть

 <my-context-menu>
    <ul>
      <li>
        <a ng-click="f()">Option 1</a>
      </li>
     <li>
        <a ng-click="f()">Option 2</a>
      </li>
  </ul>
</my-context-menu>

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

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

Ответ №2:

Я бы использовал более общий подход и сделал его повторно используемым для различных контроллеров. Подумайте о настраиваемой опции для добавления элементов в меню. Какие методы будут вызываться при нажатии на этот элемент — сделайте это также настраиваемым.

Также расположение контекстного меню, если меню отображается в правом углу и скрывается в окне — есть обнаружение на месте, чтобы сдвинуть меню влево.

Вы можете проверить тот, который я написал — https://github.com/shekhardesigner/Context-Menu-Angular-Directive

Метки: