I've encountered a situation where I need to sort an HTML table. Here is the code snippet:
<table>
<thead>
<tr>
<th custom-sort-one order="'Name'" >Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name_AAA</td>
</tr>
</tbody>
</table>
To tackle this, I decided to create a custom directive called customSortOne.
app.directive("customSortOne", function() {
return {
restrict: 'A',
transclude: true,
scope: {
order: '='
},
template: '<a href="#" ng-click="sort_by(order)" style="color: #555555;"><span ng-transclude></span></a>',
link: function(scope) {
scope.sort_by = function(ColumnToSort) {
console.log("ColumnToSort =", ColumnToSort);
scope.TestFunction();
};
}
}
});
The directive works when the user clicks on the Name column header, but there's an issue - it can't access the parent scope's function written in the controller.
To overcome this limitation, I modified my directive using inherited scope.
app.directive("customSortTwo", function() {
return {
restrict: 'A',
transclude: true,
scope: true,
template: '<a href="#" ng-click="sort_by(order)" style="color: #555555;"><span ng-transclude></span></a>',
link: function(scope) {
scope.sort_by = function(ColumnToSort) {
console.log("ColumnToSort =", ColumnToSort);
scope.TestFunction();
};
}
}
});
Now I can access the parent scope, but a new problem arises - I am unable to pass arguments to the sort_by function.