Within my list directive (which is essentially a table), each element contains a tools directive with select, edit, and delete buttons. The tools directive has callbacks for each action so that a specific controller can handle each action separately. However, I am unsure of how to pass the selected item to the controllers callback function. Any suggestions on how to achieve this?
The tools directive:
Javascript: Define the callbacks here
app.directive('itemTools', function() {
return {
restrict: 'AE',
transclude: true,
scope: {
item: '=',
selectCallback: '&',
editCallback: '&',
deleteCallback: '&',
cloneCallback: '&',
activateCallback: '&',
deactivateCallback: '&',
},
link: function(scope, element, attr) {
},
templateUrl:'templates/common/item.tools.html',
controller: function($rootScope, $scope) {
}
}
});
HTML:
<div>
<button ng-click="selectCallback({id: item.id})">
</button>
<button ng-click="editCallback({id: item.id})">
</button>
<button ng-click="deleteCallback({id: item.id})">
</button>
<button ng-click="cloneCallback({item: item})">
</button>
<button ng-click="activateCallback({item: item})">
</button>
<button ng-click="deactivateCallback({item: item})">
</button>
</div>
The list directive: These callbacks are further processed by the item-tools directive
app.directive('moduleList', function() {
return {
restrict: 'E',
scope: {
modules: '=',
selectCallback: '&',
editCallback: '&',
deleteCallback: '&',
cloneCallback: '&',
activateCallback: '&',
deactivateCallback: '&',
},
templateUrl:'templates/module/module.list.html',
controller: function($scope) {
}
}
});
HTML:
<table class="table table-responsive">
<tbody>
<tr ng-repeat="item in items | orderBy:orderByField:reverseSort">
<td class="text-center">
SOME DATA OF THE OBJECT....
</td>
<td>
<item-tools
item="item"
select-callback="selectCallback({id: item.id})"
edit-callback="editCallback(item.id)"
delete-callback="deleteCallback(item.id)"
clone-callback="cloneCallback(item)"
activate-callback="activateCallback(item)"
deactivate-callback="deactivateCallback(item)">
</item-tools>
</td>
</tr>
</tbody>
</table>
I have successfully triggered the controllers function, but am struggling with how to pass in the selected item itself.
Appreciate any help!