2013-02-20 32 views
2

我有一个客户端坚持在右键菜单上的项目。问题是从右键菜单中的选项调用的函数需要访问模型上的信息。这里是一个例子小提琴http://jsfiddle.net/7yCwW/1/$scope.junkDataSet = [{index:foo, color:bar}]。基本上我需要的是一个带有显示颜色选项的上下文菜单。点击“显示颜色”后,会显示一条警报,指出右键点击的项目的颜色。角度js中继器的上下文菜单

+0

你打算如何显示上下文菜单?你打算使用什么库/代码?你能把它包括在你的小提琴中吗? – 2013-02-21 01:12:38

回答

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"; 
    } 
} 

编辑 我路过一个完整的对象引用和使用发挥各地NG点击指令。您可以使用

<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-点击是因为不走,你必须返回false保持默认浏览器中单击鼠标右键,从发生作用的上下文菜单上。目前使用ng-click指令b/c无法实现,它将解析为控制器方法,并且返回语句会混淆该操作。

我玩过ng-contextmenu,但该事件处理函数不存在。很容易添加到Angular中,但不是核心产品的一部分

这是什么给你留下的?无论是原始答案(将数据绑定到特定属性中),还是可以将JS变量中的某些缓存引用保留为完整列表,并仅绑定某个属性中的某个键。或者将密钥作为参数传递给你的函数。不优雅,但你不能在v1框架中拥有所有东西:)