javascript - Angular JS 中继器中的上下文菜单

Question

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

Answer 1

原始答案

您可以将相关数据绑定(bind)为元素内的专有属性，并让接收函数使用 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 指令来实现这一点，因为它解析为 Controller 方法，并且 return 语句混淆了该操作。

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

这会让你做什么？要么使用原始答案(将数据绑定(bind)到特殊属性中)，要么您可以在 JS 变量中维护一些对完整列表的缓存引用，并仅绑定(bind)某个属性中的键。或者将 key 作为参数传递给您的函数。不优雅，但你不可能在 v1 框架中拥有所有内容:)