javascript - 角度 js 中继器中的上下文菜单

Question

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

Answer 1

原始答案

您可以将相关数据绑定为元素内的专有属性，并让接收函数使用 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-click 指令来玩弄。你可以使用

<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 是不行的，因为在上下文菜单上，您必须返回 false 以防止发生默认的浏览器右键单击操作。目前无法使用 ng-click 指令 b/c 来实现这一点，它解析为控制器方法，并且 return 语句混淆了该操作。

我玩过 ng-contextmenu，但该事件处理程序功能不存在。添加到 Angular 很容易，但不是核心产品的一部分

这会让你在哪里？使用原始答案（将数据绑定到特殊属性），或者您可以在 JS 变量中维护一些缓存引用到完整列表并仅绑定某个属性中的键。或者将密钥作为参数传递给您的函数。不优雅，但你不能在 v1 框架中拥有一切:)