Unique answer
To efficiently transfer data within an element, consider embedding the necessary information as custom attributes and then retrieve this data in the receiving function using 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";
}
}
Edit
I experimented with passing a complete object reference and utilizing an ng-click directive. You can use
<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>
Using ng-click proves challenging as it requires a return false to prevent the default browser right-click action, which ng-click doesn't facilitate due to how it resolves to a controller method. As such, I explored ng-contextmenu, but unfortunately it lacks an event handler feature not included in the core Angular functionalities.
So, what are the alternatives? Stick with the original suggestion (binding data into a specific attribute) or maintain a cached reference to the entire dataset in a JavaScript variable and bind only a key as an attribute. Alternatively, pass the key as a parameter to your function. While not the most elegant solutions, sometimes compromises are inevitable in version 1 frameworks :)