2013-02-20 1 views
2

У меня есть проект, в котором клиент настаивает на меню правой кнопки мыши. Проблема в том, что функция, вызываемая из параметров в меню правой кнопки мыши, должна иметь доступ к информации о модели. Вот пример скрипта http://jsfiddle.net/7yCwW/1/$scope.junkDataSet = [{index:foo, color:bar}]. В основном то, что мне нужно, - это контекстное меню с возможностью отображения цвета. После того, как «показать цвет» щелкнули предупреждение, в котором указывается цвет элемента, который был щелкнут правой кнопкой мыши.Контекстное меню в угловых js-повторителях

+0

Как вы планируете отображать контекстное меню? Какую библиотеку/код вы планируете использовать? Можете ли вы включить его в свою скрипку? –

ответ

2

Оригинальный ответ

Вы могли бы связать соответствующие данные в качестве собственных атрибутов внутри элемента и есть функция принимающая вытаскивать значение атрибута с el.getAttribute («mycolor»);

http://jsfiddle.net/7yCwW/3/

<div ng-controller="Ctrl"> 
    <div ng-repeat="junk in junkDataSet" onclick="fooClick(event)" mycolor="{{junk.color}}" class="contextmenu">right click here</div> 
</div> 

<div id="myoutput" ></div> 

...

function fooClick(e){ 
    var e = e || window.event 
    var t = e.target; 
    var clr = t.getAttribute("mycolor") 
    var el = document.getElementById('myoutput'); 
    el.innerHTML = "You picked " + clr; 
    el.style.background = clr; 
    if(clr == 'black' || clr == "blue'){ 
     el.style.color = "white"; 
    } 
    else{ 
     el.style.color = "black"; 
    } 
} 

Редактировать Я играл с пропусканием полной ссылки на объект и с помощью нг щелкните директиву. Вы можете использовать

<div ng-repeat="{{junk in junkDataSet}}" onclick='fooClick({{junk}})' > ... </div> 
// in JSFiddle becomes invalid markup, but is actually OK 
<div onclick="{ "index" : 0, "color" : "red" }" > ... </div> 

Использование нг-клик не является не годно, потому что в контекстном меню вы должны вернуть ложь, чтобы браузер по умолчанию правой кнопки мыши действия происходили. В настоящее время этого не может быть достигнуто с помощью директивы ng-click b/c, которая разрешает метод контроллера, а оператор return смущает эту операцию.

Я играл с ng-contextmenu, но функция обработчика событий не существует. Легко добавить в Angular, но не в базовое предложение

Куда это вас покидает? Либо с исходным ответом (привязать данные к специальному атрибуту), либо вы можете сохранить некоторую кешированную ссылку в переменной JS в полный список и связать только ключ в каком-то атрибуте. Или передайте ключ в качестве параметра вашей функции. Не изящно, но вы не можете иметь все в рамках v1 :)