I have a set of items listed with unique objects within my controller
$scope.itemsList = [
{"id": 0, "item": "sw", "category": 'A' },
{"id": 1, "item": "mlr", "category": 'B'},
{"id": 2, "item": "lvm", "category": 'C'},
{"id": 3, "item": "ltc", "category": 'D'},
{"id": 4, "item": "fr", "category": 'E'},
{"id": 5, "item": "cap", "category": 'F'}
];
Using ng-repeat in my HTML to display them
<li ng-repeat="item in itemsList" ng-click="selectItem(item.id)"></li>
I can track the clicked item using $scope.selectItem triggered by ng-click. This is straightforward.
But what if later on, in a directive, an event is triggered? How do I extract information from the element, such as the original object id it belongs to?
// When a draggable item is grabbed
ums.directive('draggable', function (){
return function ($scope, element, attr){
var el = element[0];
el.draggable = true;
el.addEventListener(
'dragstart',
function(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('Text', this.id);
this.classList.add('drag');
// My goal here is to retrieve the corresponding object id from $scope.itemsList when this event is fired
console.log(el.$scope.item.id); // my initial thought
return false;
},
false
);
}
})